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.

The font-kerning property utilizes and controls the kerning information stored in a font. Syntax Kerning specifies how letters are spaced. If the specified font does not include any kerning data, this property will have no effect. div.ex { font-kerning: normal; } Values auto Default value. The browser determines whether or not font kerning should be […]

The font-size property specifies the size of a font. Syntax Examples: p.one { font-size: 14px; } p.two { font-size: 14px; } p.three { font-size: 14px; } Values xx-small The font-size is set to xx-small. x-small The font-size is set to x-small. small The font-size is set to small. medium Default value. The font-size is set […]

The font-size-adjust property helps control the font size when the first selected font is not available. Syntax This property notifies the browser of the primary font’s “aspect value” – the size difference between lowercase “x” and uppercase “X” – so that if it is not available, the browser can figure out what font-size to use […]

The font-stretch property provides the ability to make text narrower (condensed) or wider (expanded). Syntax Not all fonts offer condensed or expanded faces, so font-stretch will only work when used with those that do. div.ex { font-family: "Helvetica Neue", sans-serif; font-stretch: expanded; } Values ultra-condensed The text is made as narrow as it gets. extra-condensed […]

The font-style property designates a text’s font style. Syntax Examples: div.one { font-style: normal; } div.two { font-style: italic; } div.three { font-style: oblique; } Values normal Default value. The text’s font style is normal. italic The text’s font style is italic. oblique The text’s font style is oblique. initial Sets the property to its […]