The padding-top property designates the amount of space between an element’s contents and its top border. Syntax Padding cannot use negative values. div.ex { padding-top:30px; } Values length Defines in length units (px, pt, em, etc.) the space (padding) between the top of the content and the top border of the element. Default value is […]

The page-break-after property adds a page-break after the element that is specified. Syntax This property cannot be used on an empty <div> or absolutely positioned elements. page-break-before, page-break-after, and page-break-inside are all used to designate how a document will print. @media print { .section-two { page-break-after: always; } } Values auto Default value. Page breaks […]

The page-break-before property adds a page-break before the element that is specified. Syntax This property cannot be used on an empty <div> or absolutely positioned elements. page-break-before, page-break-after, and page-break-inside are all used to designate how a document will print. @media print { h2 { page-break-before: always; } } Values auto Default value. Page breaks […]

The page-break-inside property designates whether or not a page-break should be avoided inside the element. Syntax This property cannot be used on absolutely positioned elements. page-break-before, page-break-after, and page-break-inside are all used to designate how a document will print. @media print { blockquote { page-break-inside: avoid; } } Values auto Default value. Page breaks are […]

The perspective property gives a 3D-positioned element some perspective. Syntax The perspective property designates how far away the object is from the user. The lower the value, the more intensive the 3D effect is than a higher value. Child elements get the perspective view, not the element to which the perspective property is applied. div.ex […]

The perspective-origin property designates the position from which the user is viewing the 3D-positioned element. Syntax When the perspective-origin property is defined, it is applied the child elements, not the element itself. This property must be used in conjunction with the perspective property. div.ex { perspective: 150px; perspective-origin: right; } Values x-axis Defines where the […]

The pointer-events property designates whether or not the element reacts to pointer events. Syntax Example: div.ex { pointer-events: none; } Values auto Default value. The element reacts normally to pointer events such as :hover and click. none The element has no reaction to pointer events. initial Sets the property to its default value. inherit Inherits […]

The position property designates which type of method is used for positioning an element. Syntax Example: div.ex { left: 50px; position: absolute; top: 100px; } Values static Default value. Elements render in the same order as they appear in the document flow. absolute The element is positioned relative to its first positioned ancestor (not static). […]

The quotes property defines the type of quotation marks that are used in quotations. Syntax Example: p.ex { quotes: "'" "'"; } Values none No quotation marks will be produced for the values of “open-quote” and “close-quote” of the “content” property. string string string string Designates which quotation marks to use, with the first two […]

The resize property designates if and how an element can be resized by the user. Syntax Note that the resize property will not work with inline elements or block elements that have overflow: visible set. Overflow must be set to scroll, auto, or hidden for such elements. div.ex { resize: horizontal; overflow: auto; } Values […]

The right property is used to set the horizontal position on elements that have the position set to relative, fixed, absolute, or sticky. It has no effect on elements that are not positioned. Syntax If the element’s position is set to absolute or fixed, the right property sets the right of the element to a […]

The row-gap property designates the gap between rows in a grid. Syntax This property was formerly known as grid-row-gap. div.gap { display: grid; row-gap: 25px; } Values length Designates a length or percentage that sets the gap between rows. normal Default value. Designates a normal gap between rows. initial Sets the property to its default […]

The scroll-behavior property designates whether scrolling is smoothly animated or a straight jump when a link is clicked within a scrollable box. 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 […]

The tab-size property sets the width of a tab character. Syntax The HTML tab character is typically displayed as a single-space character except for some elements, such as <textarea> and <pre>. The tab-size property will only be visible for those elements. pre { tab-size: 16; } Values number Default value is 8. Numerical value that […]

The table-layout property designates the algorithm used to lay out cells, rows, and columns in a table. Syntax Using table-layout: fixed renders the table much faster than table-layout: auto. table.a { table-layout: auto; } table.f { table-layout: fixed; } Values auto Default value. Browsers use an automatic layout algorithm – the content dictates the layout. […]

The text-align property designates the horizontal alignment of text within an element. Syntax Examples: div.c { text-align: center; } div.l { text-align: left; } div.r { text-align: right; } div.j { text-align: justify; } Values left Default value if text direction is left to right. Aligns text to the left. right Default value if text […]

The text-align-last property designates how the last line of a text should be aligned. Syntax When applied to an element, the text-align-last property sets the alignment for all last lines within the element. div.al { text-align-last: right; } Values auto Default value. The last line is aligned left and justified. left The last line is […]

The text-decoration property designates the decoration added to text. Syntax The text-decoration property is also a shorthand property for text-decoration-line (required), text-decoration-color, text-decoration-style, and text-decoration-thickness. h3 { text-decoration: underline; } /* Shorthand version */ h3 { text-decoration: underline solid green 3px; } Values text-decoration-line Designates the kind of text decoration that will be displayed. text-decoration-color […]

The text-decoration-color property designates the color of the text-decoration. Syntax Example: h3 { text-decoration: underline; text-decoration-color: green; } /* Shorthand version */ h3 { text-decoration: underline solid green 3px; } Values color Designates the color of the text-decoration. initial Sets the property to its default value. inherit Inherits this property’s value from its parent item.

The text-decoration-line property designates the kind of text decoration that will be displayed. Syntax Values can be combined, like overline and underline to render lines in both locations. h3 { text-decoration-line: underline; } h4 { text-decoration-line: overline underline; } /* Shorthand version */ h3 { text-decoration: underline solid green 3px; } Values none Default value. […]

The text-decoration-style property designates the style of the text decoration. Syntax Example: h3 { text-decoration: underline; text-decoration-style: dotted; } /* Shorthand version */ h3 { text-decoration: underline dotted green 3px; } Values solid Default value. Renders as a single line. double Renders as a double line. dotted Renders as a dotted line. dashed Renders as […]

The text-decoration-thickness property designates the thickness of the decoration line. Syntax Example: h3 { text-decoration: underline; text-decoration-thickness: 3px; } /* Shorthand version */ h3 { text-decoration: underline solid green 3px; } Values auto Default value. The browser determines the thickness of the decoration line. from-font Behaves as auto unless the font-file contains information about a […]

The text-indent property designates a positive or negative value for the indentation of the first line of text in an element. Syntax If the text-indent property is set to a negative value, the first line will be indented to the left. p.px { text-indent: 25px; } p.em { text-indent: -5em; } p.per { text-indent: 15%; […]

The text-justify property designates the method used for the justification of text when using text-align: justify. Syntax Example: div.just { text-align: justify; text-justify: inter-character; } Values auto Default value. The justification algorithm is determined by the browser. inter-word Increases or decreases the space between words. inter-character Increases or decreases the space between characters. none Disables […]