CSS3 - Multi Columns
CSS3 - Multi Columns
The CSS3 supports multi-columns (with or without line) for arranging the text in a newspaper format. The most useful multi-column properties are as below,
Column-count: the text element is divided into a specified number of columns.
Column-gap: this property specifies the gap in pixel between the columns.
Column-rule-style: it denotes the style rule for columns like solid.
Example:
<html>
<head>
<style>
.multi {
/* Column count property */
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
/* Column gap property */
-webkit-column-gap: 50px;
-moz-column-gap: 50px;
column-gap: 50px;
/* Column style property */
-webkit-column-rule-style: solid;
-moz-column-rule-style: solid;
column-rule-style: solid;
}
.multi1 {
/* Column count property */
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
/* Column gap property */
-webkit-column-gap: 5%;
-moz-column-gap: 5%;
column-gap: 5%;
}
</style>
</head>
<body>
<b>CSS3 - Multi Columns- with line</b>
<div class = "multi">
The fonts which are not installed in the computer can be used by Web font features. The font which is needed to use should include @font-face rule that will automatically downloaded for the user. Various web font formats include TTF (true type fonts), OTF (open type fonts), WOFF (web open font format), SVG fonts/shapes, EOT (embedded open type fonts), etc.
In the @font-face rule, various attributes can be given as below,
Font-family: it denotes the name of the font.
Src: it defines the URL of the required font.
Font-stretch: it denotes how font should be stretched.
Font-weight: it defines about boldness of the font.
</div><br><br><br><br>
<b>CSS3 - Multi Columns- without line</b>
<div class = "multi1">
The fonts which are not installed in the computer can use by Web font feature. The font which is needed to use should include @font-face rule that will automatically downloaded for the user. Various web font formats includes TTF (true type fonts), OTF (open type fonts), WOFF (web open font format), SVG fonts/shapes, EOT (embedded open type fonts), etc.
In the @font-face rule, various attributes can be given as below,
Font-family: it denotes the name of the font.
Src: it defines the URL of the required font.
Font-stretch: it denotes how font should be stretched.
Font-weight: it defines about boldness of the font.
</div>
</body>
</html>
Output:
