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 […]

The font-variant property designates whether or not text should be displayed in a small-caps font. Syntax Small-caps fonts convert all lowercase letters to uppercase, but the converted uppercase letters display in a smaller font size than the original uppercase letters. div.smallcaps { font-variant: small-caps; } Values normal Default value. A normal font is displayed. small-caps […]

The font-variant-caps property provides the ability to control the usage of alternate glyphs for capital letters. Syntax Examples: div.normal { font-variant-caps: normal; } div.all-small { font-variant-caps: all-small-caps; } div.uni { font-variant-caps: unicase; } Values normal Default value. No alternative glyphs will be used. small-caps Small capitals are used. all-small-caps Small capitals are used for both […]

The font-weight property determines how thin or thick text characters will be displayed. Syntax Examples: div.normal { font-weight: normal; } div.bold { font-weight: bold; } div.thinner { font-weight: 300; } Values normal Default value. Characters will display normally. bold Characters will be thick. bolder Characters will be thicker. lighter Characters will be thinner. 100 200 […]

The gap property specifies the size of the gap (space) between rows and columns. It is a shorthand for row-gap and column-gap. Syntax Before CSS3 this property was known as grid-gap. .container { gap: 20px 30px; } Values row-gap Specifies the size of the gap between rows in a grid layout. column-gap Specifies the size […]

The grid property is a shorthand property for grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and grid-auto-flow. Syntax Example: /* .container is a 3-column grid with a 200px height first row */ .container { display: grid; grid: 200px / auto auto auto; } Values grid-template-rows / grid-template-columns Designates the sizes of the columns and rows. grid-template-areas Designates […]

The grid-area property designates the size and location of a grid item in a grid layout and is also a shorthand for grid-row-start, grid-column-start, grid-row-end, and grid-column-end. Syntax This property can also be used to assign a name to a grid item, which can then be referenced by the grid-template-areas property of the container. /* […]

The grid-auto-columns property defines the size of the columns in a grid container. Syntax The grid-auto-columns property only affects columns that do not have a set size. .container { display: grid; grid-auto-columns: 200px; } Values auto Default value. The columns’ sizes are determined by the size of the largest item in the container. max-content The […]

The grid-auto-flow property specifies how auto-placed items are inserted in the grid. Syntax Example: .container { display: grid; grid-auto-flow: column; } Values row Default value. Items are placed by filling each row. column Items are placed by filling each column. dense Items are placed by filling any holes in the grid. row dense Items are […]

The grid-auto-rows property defines the size of rows in a grid container. Syntax The grid-auto-rows property only affects rows that do not have a set size. .container { display: grid; grid-auto-rows: 200px; } Values auto Default value. The rows’ sizes are determined by the size of the largest item in the row. max-content The largest […]

The grid-column property defines an item’s size and location in a grid layout and is also a shorthand property for grid-column-start and grid-column-end. Syntax Example: /* .item.ex will start on column 2 and span 3 columns */ .item.ex { grid-column: 2 / span 3; } Values grid-column-start Specifies which column-line the item will start on. […]

The grid-column-end property specifies on which column-line the item will end, or the number of columns an item will span. Syntax Example: .item { grid-column-end: span 4; } Values auto Default value. The item spans one column. span n Designates the amount of columns the item spans. row-line Designates on which column-line the item will […]

The grid-column-start property specifies which column-line the item will start on. Syntax Example: /* .item will start on column 3 */ .item { grid-column-start: 3; } Values auto Default value. The item follows the normal flow. span n Designates the amount of columns the item will span across. column-line Designates which column the item will […]

The grid-row property defines an item’s size and location in a grid layout and is also a shorthand property for grid-row-start and grid-row-end. Syntax Example: /* .item.ex will start on row 2 and span 3 rows */ .item.ex { grid-row: 2 / span 3; } Values grid-row-start Specifies which row-line the item will start on. […]

The grid-row-end property specifies on which row-line the item will end, or the number of rows an item will span. Syntax Example: .item { grid-row-end: span 4; } Values auto Default value. The item spans one row. span n Designates the amount of rows the item spans. row-line Designates on which row-line the item will […]

The grid-row-start property specifies which row-line the item will start on. Syntax Example: .item { grid-row-start: 3; } Values auto Default value. The item follows the normal flow. row-line Designates which row the item will start on.

The grid-template property is the shorthand property for grid-template-rows, grid-template-columns, and grid-template-areas (in that order). Syntax Explain the syntax of this reference item and show an example in the code block below. Try to remove as much unnecessary items as possible. It’s important this is easy to process at a glance. /* A 2-column grid […]

The grid-template-areas property designates areas within a grid layout. Syntax The grid-area property is used to name grid items, which can then be referenced by name in the grid-template-areas property. Areas are defined by apostrophes, and a period is used to refer to a grid item with no name. .area1 { grid-area: exampleArea; } .container […]

The grid-template-columns property designates the number and widths of the columns in a grid layout. Syntax The width of each column is specified in a space separated list of values. First value is for the first column, second value for the second column, and so on. .container { display: grid; grid-template-columns: 150px 200px; } Values […]

The grid-template-rows property designates the number and heights of the rows in a grid layout. Syntax The height of each row is specified in a space separated list of values. First value is for the first row, second value for the second row, and so on. .container { display: grid; grid-template-rows: 150px 200px; } Values […]