The column-rule-style property designates the style of the rule between columns. Syntax Example: div.ex { column-rule-style: solid; } Values none Default value. No rule will be used. hidden Specifies a hidden rule. dotted The rule will be dotted. dashed The rule will be made of dashes. solid The rule will be solid. double Designates a […]

The column-rule-width property designates the width of the rule between columns. Syntax Example: div.ex { column-rule-width: 15px; } Values medium Default value. Sets a medium-width rule. thin Sets a thin-width rule. thick Sets a thick-width rule. length Designates the width of the rule in length units. initial Sets the property to its default value. inherit […]

The column-span property designates the amount of columns an element should span across. Syntax Example: h3 { column-span: all; } Values none Default value. Only one column is spanned across. all The element will span across all columns. initial Sets the property to its default value. inherit Inherits this property’s value from its parent item.

The column-width property designates the column width. Syntax The width is more of a “minimum width suggestion” for the browser. If at least two columns cannot fit at the designated width then the browser will drop the content into a single column. div.ex { column-width: 150px; } Values auto Default value. The browser determines the […]

The columns property is shorthand for column-width and column-count, in that order. Syntax Example: div.ex { columns: 150px 4; } Values auto Default value. Both the column-width and the column-count are set to “auto”. column-width Designates the minimum column width. column-count Designates the maximum amount of columns an element will be divided into. initial Sets […]

The content property is used to insert generated content by utilizing the ::before and ::after pseudo-elements. Syntax Example: a::before { content: " (" attr(href) ")"; } Values normal Default value. If specified, sets the content to normal, which default is “none”. none Content is set to nothing. counter Content is set as a counter. attr(attribute) […]

The counter-increment property increases or decreases the value of one or more CSS counters. Syntax This property is usually used in conjunction with the counter-reset property and the content property. body { counter-reset: my-counter; } div.ex:before { counter-increment: my-counter; content: "Section " counter(my-counter) ". "; } Values none Default value. No counters will be incremented. […]

The counter-reset property is used to create or reset one or more CSS counters. Syntax This property is usually used in conjunction with the counter-increment property and the content property. body { counter-reset: my-counter; } div.ex:before { counter-increment: my-counter; content: "Section " counter(my-counter) ". "; } Values none Default value. No counters will be reset. […]

The cursor property designates which mouse cursor is displayed when hovering over an element. Syntax Examples: div.one { cursor: auto; } div.two { cursor: crosshair; } div.three { cursor: none; } Values alias The cursor shows that an alias of something is to be created. all-scroll The cursor shows that something can be scrolled in […]

The direction property designates the text/writing direction within a block-level element. Syntax Examples: div.ex { direction: rtl; } Values ltr Default value. Text goes from left-to-right. rtl Text goes from right-to-left. initial Sets the property to its default value. inherit Inherits this property’s value from its parent item.

The display property designates the type of rendering box of an element. Syntax Examples: div.one { display: none; } div.one { display: inline; } div.one { display: inline-block; } div.one { display: block; } Values inline The element is displayed inline with height and width properties having no effect. block The element is displayed as […]

The empty-cells property designates whether to display borders on empty cells in a table. Syntax If border-collapse is set to “collapse”, this property has no effect. table.ex { empty-cells: hide; } Values show Default value. Borders are displayed on empty cells. hide Borders are hidden on empty cells. initial Sets the property to its default […]

The filter property specifies visual effects that are added to an element. Syntax Example: img.ex { filter: grayscale(80%); } Values none Default value. No effects are applied. blur(px) Adds a blur effect, where the higher the value, the more blur is added. brightness(%) Changes the brightness of the element, where 0% is totally black, 100% […]

The flex property is shorthand for flex-grow, flex-shrink, and flex-basis, in that order. Syntax This property only has an effect on flexible items. .container { flex: 1; } Values flex-grow Numerical value that designates how a flexible item will shrink in relation to the rest of the flexible items in the same container. flex-shrink Numerical […]

The flex-basis property designates the initial length of a flexible item. Syntax This property only has an effect on flexible items. .flex-item { flex-basis: 150px; } Values number Designates the initial length of a flexible item or items, as defined by a length unit (px, em, rem, etc.) or percentage. auto Default value. The length […]

The flex-direction property designates the direction in which the flexible items will flow. Syntax This property only has an effect on flexible items. .container { display: flex; flex-direction: column-reverse; } Values row Default value. Items are displayed horizontally, as in a row. row-reverse Items are displayed horizontally, as in a row, but in reverse order. […]

The flex-flow property is shorthand for flex-direction and flex-wrap, in that order. Syntax This property only has an effect on flexible items. .container { display: flex; flex-flow: column-reverse wrap; } Values flex-direction Default value is “row”. Designates the direction in which the flexible items will flow. Possible values: row, row-reverse, column, column-reverse, initial, inherit. flex-wrap […]

The flex-grow property designates how a flexible item will shrink in relation to the rest of the flexible items in the same container. Syntax This property only has an effect on flexible items. div.ex { flex-grow: 2; } Values number Default value is 0. A numerical value that sets how much the item will grow […]

The flex-shrink property designates how a flexible item will shrink in relation to the rest of the flexible items in the same container. Syntax This property only has an effect on flexible items. div.ex { flex-shrink: 2; } Values number Default value is 1. A numerical value that sets how much the item will shrink […]

The flex-wrap property designates whether the items inside a flex container should wrap or not. Syntax This property only has an effect on flexible items. .container { display: flex; flex-wrap: wrap; } Values nowrap Default value. The items will not wrap. wrap If necessary, the items will wrap. wrap-reverse If necessary, the items will wrap, […]

The float property sets an element to float to the left, right, or not at all. Syntax Use the clear property to keep elements next to a floating element from flowing around it. Absolutely positioned elements ignore the float property. div.ex { float: left; } Values none Default value. No float is applied. left The […]

The font property is shorthand for font-style, font-variant, font-weight, font-size/line-height, and font-family (in that order). Syntax Default values are used if any of the optional values are missing, but font-size and font-family are required. /* wrap <code> tags inside <pre> tags to create code blocks like this */ Values font-style Designates a text’s font style. […]

The font-family property designates the font for an element. Syntax The font-family property can use several font names as fallbacks in which the browser tries the comma-separated list in order until it finds the first font it can support. Start with the name of the font desired first in the list, and always end with […]

The font-feature-settings property controls advanced typographic features in OpenType fonts. Syntax Examples: div.one { font-feature-settings: "smcp" on; } div.one { font-feature-settings: "c2sc", "smcp"; } div.one { font-feature-settings: "frac"; } Values normal Default value. The default text layout settings are applied. feature-value Uses a string of 4 ASCII characters followed by 1, 0, on, or off.