ankitweblogic logo
W e b t u t o r i a l s

Types of Style Sheet

Import Style Sheet

CSS3 Border Images

CSS2 Clip Property

CSS3 Background

CSS3 Color Property

CSS3 Linear Gradient

CSS3 Radial Gradient

CSS3 text-shadow

CSS3 word-wrap

CSS3 box-shadow

CSS text-stroke

CSS3 Nested Menu

CSS3 Combinators

CSS3 Pseudo Classes

CSS3 Pseudo Element

CSS3 2D Transform

CSS3 2D Transform

CSS3 3D Transform

CSS3 Transitions

CSS3 Animation

CSS3 Animation Exercise

CSS3 Multiple Columns

After Before Shadow

CSS3 Resize Property

CSS3 Shapes

CSS Tooltip

CSS Hover Effect

CSS3 Multiple Columns

The CSS3 multi-column is use to divide a column into multiple columns like in newspapers.

Attribute Description
column-count specifies the number of columns an element should be divided
column-gap specifies the gap between the columns.
column-rule-style specifies the style of the rule between columns
column-rule-width specifies the width of the rule between columns
column-rule-color specifies the color of the rule between columns
column-rule shorthand property for setting the width, style, and color of the rule between columns
column-span specifies how many columns an element should span

CSS3 Create Multiple Columns

The column-count property specifies the number of columns an element should be divided into.

Output:

CSS3 Specify the Gap Between Columns

The column-gap property specifies the gap between the columns.

-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
Output:

CSS3 Column Style

The column-rule-style property specifies the style of the rule between columns.

-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
-moz-column-rule-style: solid; /* Firefox */
column-rule-style: solid; 

-webkit-column-rule-width: 10px; /* Chrome, Safari, Opera */
-moz-column-rule-width: 10px; /* Firefox */
column-rule-width: 10px;
    
-webkit-column-rule-color: red; /* Chrome, Safari, Opera */
-moz-column-rule-color: red; /* Firefox */
column-rule-color: red;  
Output:

column-span property

The column-span property specifies how many columns an element should span.

-webkit-column-span: all; /* Chrome, Safari, Opera */
-moz-column-span: all;
column-span: all;
Output: