CSS
CSS Properties
CSS Property Groups:
| Animation<br> Background<br> Borders and Outline<br> Box<br> Color<br> Content Page Media Properties<br> Dimensions<br> Box Model (New)<br> Box Model (Old)<br> Font<br> Content Generation | Grid<br> Hyperlinks<br> Line Box<br> List<br> Margin<br> Caption<br> Multi-column<br> Padding<br> Page Media<br> Positioning | Pagination<br> Ruby<br> Speech<br> Table<br> Text<br> 2D/3D Transform<br> Transition<br> User Interface |
The "CSS" column indicates in which CSS version the property is defined (CSS1, CSS2, or CSS3).
Animation Properties
| Property | Description | CSS |
|---|---|---|
| @keyframes | Defines an animation, the animation name defined by @keyframes is used by animation-name. | 3 |
| animation | Compound property. Retrieves or sets the animation effects applied to the object. | 3 |
| animation-name | Retrieves or sets the name of the animation applied to the object, must be used with @keyframes rule as the animation name is defined by @keyframes. | 3 |
| animation-duration | Retrieves or sets the duration of the object's animation. | 3 |
| animation-timing-function | Retrieves or sets the transition type of the object's animation. | 3 |
| animation-delay | Retrieves or sets the delay time of the object's animation. | 3 |
| animation-iteration-count | Retrieves or sets the number of cycles in the object's animation. | 3 |
| animation-direction | Retrieves or sets whether the object's animation reverses direction on alternate cycles. | 3 |
| animation-play-state | Retrieves or sets the state of the object's animation. | 3 |
Background Properties
| Property | Description | CSS |
|---|---|---|
| background | Compound property. Sets the background characteristics of the object. | 1 |
| background-attachment | Sets or retrieves whether the background image is fixed or scrolls with the content. Must specify the background-image property first. | 1 |
| background-color | Sets or retrieves the background color of the object. | 1 |
| background-image | Sets or retrieves the background image of the object. | 1 |
| background-position | Sets or retrieves the position of the background image of the object. Must specify the background-image property first. | 1 |
| background-repeat | Sets or retrieves how the background image is tiled. Must specify the background-image property first. | 1 |
| background-clip | Specifies the clipping region for the background image of the object. | 3 |
| background-origin | Sets or retrieves the reference point for the background image when calculating the background-position. | 3 |
| background-size | Retrieves or sets the size of the background image of the object. | 3 |
Border and Outline Properties
| Property | Description | CSS |
|---|---|---|
| border | Composite property. Sets the characteristics of the object's border. | 1 |
| border-bottom | Composite property. Sets the characteristics of the object's bottom border. | 1 |
| border-bottom-color | Sets or retrieves the color of the object's bottom border. | 1 |
| border-bottom-style | Sets or retrieves the style of the object's bottom border. | 1 |
| border-bottom-width | Sets or retrieves the width of the object's bottom border. | 1 |
| border-color | Sets or retrieves the color of the object's border. | 1 |
| border-left | Composite property. Sets the characteristics of the object's left border. | 1 |
| border-left-color | Sets or retrieves the color of the object's left border. | 1 |
| border-left-style | Sets or retrieves the style of the object's left border. | 1 |
| border-left-width | Sets or retrieves the width of the object's left border. | 1 |
| border-right | Composite property. Sets the characteristics of the object's right border. | 1 |
| border-right-color | Sets or retrieves the color of the object's right border. | 1 |
| border-right-style | Sets or retrieves the style of the object's right border. | 1 |
| border-right-width | Sets or retrieves the width of the object's right border. | 1 |
| border-style | Sets or retrieves the style of the object's border. | 1 |
| border-top | Composite property. Sets the characteristics of the object's top border. | 1 |
| border-top-color | Sets or retrieves the color of the object's top border. | 1 |
| border-top-style | Sets or retrieves the style of the object's top border. | 1 |
| border-top-width | Sets or retrieves the width of the object's top border. | 1 |
| border-width | Sets or retrieves the width of the object's border. | 1 |
| outline | Composite property. Sets or retrieves the outline of the object. | 2 |
| outline-color | Sets or retrieves the color of the outline of the object. | 2 |
| outline-style | Sets or retrieves the style of the outline of the object. | 2 |
| outline-width | Sets or retrieves the width of the outline of the object. | 2 |
| border-bottom-left-radius | Sets or retrieves the rounded corner of the object's bottom-left border. Accepts two parameters separated by a space, each allowing one value. The first parameter represents the horizontal radius, and the second parameter represents the vertical radius. If the second parameter is omitted, it defaults to the first parameter. | 3 |
| border-bottom-right-radius | Sets or retrieves the rounded corner of the object's bottom-right border. | 3 |
| border-image | Sets or retrieves the border style of an object using an image to fill the border. | 3 |
| border-image-outset | Specifies the amount by which the border image extends beyond the border box. | 3 |
| border-image-repeat | Specifies whether the image border should be repeated, stretched, or rounded. | 3 |
| border-image-slice | Specifies the inward offsets of the image border. | 3 |
| border-image-source | Specifies the image to be used instead of the border styles set in the border-style property. | 3 |
| border-image-width | Specifies the width of the image border. | 3 |
| border-radius | Sets or retrieves the rounded corners of an object. | 3 |
| border-top-left-radius | Defines the shape of the top-left border corner. | 3 |
| border-top-right-radius | Defines the shape of the top-right border corner. | 3 |
| box-decoration-break | Specifies how inline elements are broken across lines. | 3 |
| box-shadow | Adds one or more shadows to a box. | 3 |
Box Properties
| Property | Description | CSS |
|---|---|---|
| overflow-x | Specifies whether to clip the left/right edges of the content, if it overflows the element's content area. | 3 |
| overflow-y | Specifies whether to clip the top/bottom edges of the content, if it overflows the element's content area. | 3 |
| overflow-style | Specifies the preferred scrolling method for overflow elements. | 3 |
| rotation | Rotates an element around a point defined by the rotation-point property. | 3 |
| rotation-point | Defines the offset point from the top-left border edge. | 3 |
Color Properties
| Property | Description | CSS |
|---|---|---|
| color-profile | Allows the use of a color profile other than the default for the source. | 3 |
| opacity | Sets the transparency level of an element. | 3 |
| rendering-intent | Allows for specifications other than the default rendering intent for color profiles. | 3 |
Padding Properties
| Property | Description | CSS |
|---|---|---|
| padding | Sets all padding properties in one declaration. | 1 |
| padding-bottom | Sets the bottom padding of an element. | 1 |
| padding-left | Sets the left padding of an element. | 1 |
| padding-right | Sets the right padding of an element. | 1 |
| padding-top | Sets the top padding of an element. | 1 |
Media Page Content Properties
| Property | Description | CSS |
|---|---|---|
| bookmark-label | Specifies the label for a bookmark. | 3 |
| bookmark-level | Specifies the level of a bookmark. | 3 |
| bookmark-target | Specifies the target of a bookmark link. | 3 |
| float-offset | Push floating elements in the opposite direction, they always have float | 3 |
| hyphenate-after | Specifies the minimum number of characters after a hyphenation point in a word | 3 |
| hyphenate-before | Specifies the minimum number of characters before a hyphenation point in a word | 3 |
| hyphenate-character | Specifies the string to display when a hyphenation occurs | 3 |
| hyphenate-lines | Indicates the maximum number of consecutive hyphenated lines within an element | 3 |
| hyphenate-resource | Specifies an external resource as a comma-separated list to help determine the browser's hyphenation points | 3 |
| hyphens | Sets how to split words to improve the layout of paragraphs | 3 |
| image-resolution | Specifies the correct image resolution | 3 |
| marks | Adds crop and/or cross marks to the document | 3 |
| string-set | 3 |
Dimension Properties
| Property | Description | CSS |
|---|---|---|
| height | Sets the height of the element | 1 |
| max-height | Sets the maximum height of the element | 2 |
| max-width | Sets the maximum width of the element | 2 |
| min-height | Sets the minimum height of the element | 2 |
| min-width | Sets the minimum width of the element | 2 |
| width | Sets the width of the element | 1 |
Flexible Box Model Properties (New)
| Property | Description | CSS |
|---|---|---|
| flex | A shorthand property for setting or retrieving the flexible length for flex items. | 3 |
| flex-grow | Sets or retrieves the flex grow ratio for the flex items. | 3 |
| flex-shrink | Sets or retrieves the flex shrink ratio for the flex items. | 3 |
| flex-basis | Sets or retrieves the flex basis for the flex items. | 3 |
| flex-flow | A shorthand property for setting or retrieving the flex direction and flex wrap properties. | 3 |
| flex-direction | Determines the direction of the main axis, which defines the placement of flex items in the flex container. | 3 |
| flex-wrap | Controls whether the flex container is single-lined or multi-lined, and the direction of the cross axis, which determines the direction of new lines. | 3 |
| align-content | Aligns the flex lines within the flex container when there is extra space on the cross axis. | 3 |
| align-items | Defines the default alignment for flex items within the flex container on the cross axis. | 3 |
| align-self | Allows the default alignment to be overridden for individual flex items on the cross axis. | 3 |
| justify-content | Aligns the flex items along the main axis of the flex container. | 3 |
| order | Sets or retrieves the order in which the flex items appear within the flex container. | 3 |
Flexible Box Model Properties (Old)
| Property | Description | CSS |
|---|---|---|
| box-align | Specifies how to align the child elements of a box | 3 |
| box-direction | Specifies the direction in which the child elements of a box are displayed | 3 |
| box-flex | Specifies whether a box's child elements are flexible or fixed in size | 3 |
| box-flex-group | Assigns flexible elements to Flex groups | 3 |
| box-lines | Specifies whether to start a new row/column when it runs out of space in the parent box | 3 |
| box-ordinal-group | Specifies the display order of a box's child elements | 3 |
| box-orient | Specifies whether a box's child elements should be laid out horizontally or vertically | 3 |
| box-pack | Specifies the horizontal and vertical position of a horizontal box within a vertical box | 3 |
Font Properties
| Property | Description | CSS |
|---|---|---|
| font | Sets all font properties in one declaration | 1 |
| font-family | Specifies the font family for text | 1 |
| font-size | Specifies the font size of text | 1 |
| font-style | Specifies the font style for text | 1 |
| font-variant | Specifies the font variant for text | 1 |
| font-weight | Specifies the weight of a font | 1 |
| @font-face | A rule that allows websites to download and use fonts beyond "Web-safe" fonts | 3 |
| font-size-adjust | Specifies the aspect value for an element | 3 |
| font-stretch | Shrinks or stretches the current font family | 3 |
Generated Content Properties
| Property | Description | CSS |
|---|---|---|
| content | Used with the :before and :after pseudo-elements to insert generated content | 2 |
| counter-increment | Increments or decrements one or more counters | 2 |
| counter-reset | Creates or resets one or more counters | 2 |
| quotes | Sets the type of quotation marks for nested quotations | 2 |
| crop | Allows replaced elements to act as a single object instead of the entire object's rectangular area | 3 |
| move-to | Removes an element from the flow and reinserts it at a later point in the document | 3 |
| page-policy | Determines the string value for a given element's counter based on the page | 3 |
Grid Properties
| Property | Description | CSS |
|---|---|---|
| grid-columns | Specifies the width of each column in a grid | 3 |
| grid-rows | Specifies the height of each row in a grid | 3 |
Hyperlink Properties
| Property | Description | CSS |
|---|---|---|
| target | Shorthand property for setting target-name, target-new, and target-position properties | 3 |
| target-name | Specifies where to open the linked document (target location) | 3 |
| target-new | Specifies whether a new target link opens in a new window or in an existing window | 3 |
| target-position | Specifies the position where the new target link should be placed | 3 |
Linebox Properties
| Property | Description | CSS |
|---|---|---|
| alignment-adjust | Allows more precise alignment of elements | 3 |
| alignment-baseline | How an inline-level element is aligned with its parent | 3 |
| baseline-shift | Allows repositioning of the dominant baseline relative to the dominant-baseline | 3 |
| dominant-baseline | Specifies the scaled-baseline-table | 3 |
| drop-initial-after-adjust | Sets the initial alignment point of the main connection point of the drop | 3 |
| drop-initial-after-align | Aligns the initial line of the inline with the primary connection point, used for boxes with initial letters | 3 |
| drop-initial-before-adjust | Sets the initial alignment point of the secondary connection point of the drop | 3 |
| drop-initial-before-align | Aligns the initial line of the inline with the secondary connection point, used for boxes with initial letters | 3 |
| drop-initial-size | Controls the size of the initial letter drop | 3 |
| drop-initial-value | Activates a drop-initial effect | 3 |
| inline-box-align | Sets the alignment of lines within a multi-line inline block with previous and next inline elements | 3 |
| line-stacking | A shorthand property for setting line-stacking-strategy, line-stacking-ruby, and line-stacking-shift properties | 3 |
| line-stacking-ruby | Sets the stacking method for lines containing Ruby annotation elements within block elements | 3 |
| line-stacking-shift | Sets the stacking method for base-shift lines within block elements containing elements | 3 |
| line-stacking-strategy | Sets the stacking method for stacking line boxes within block elements | 3 |
| text-height | Sets the block-progression dimension for the text content area of inline boxes | 3 |
List Properties
| Property | Description | CSS |
|---|---|---|
| list-style | Sets all the properties for a list in one declaration | 1 |
| list-style-image | Sets the image as the list item marker | 1 |
| list-style-position | Sets the position of the list item marker | 1 |
| list-style-type | Sets the type of the list item marker | 1 |
Margin Properties
| Property | Description | CSS |
|---|---|---|
| margin | Sets all the margin properties in one declaration | 1 |
| margin-bottom | Sets the bottom margin of an element | 1 |
| margin-left | Sets the left margin of an element | 1 |
| margin-right | Sets the right margin of an element | 1 |
| margin-top | Sets the top margin of an element | 1 |
Marquee Properties
| Property | Description | CSS |
|---|---|---|
| marquee-direction | Sets the direction of the moving content | 3 |
| marquee-play-count | Sets how many times the content moves | 3 |
| marquee-speed | Sets how fast the content scrolls | 3 |
| marquee-style | Sets the style of the moving content | 3 |
Multi-column Properties
| Property | Description | CSS |
|---|---|---|
| column-count | Specifies the number of columns an element should be divided into | 3 |
| column-fill | Specifies how to fill columns | 3 |
| column-gap | Specifies the gap between the columns | 3 |
| column-rule | Shorthand property for setting all the column-rule-* properties | 3 |
| column-rule-color | Specifies the color of the rule between columns | 3 |
| column-rule-style | Specifies the style of the rule between columns | 3 |
| column-rule-width | Specifies the width of the rule between columns | 3 |
| column-span | Specifies how many columns an element should span across | 3 |
| column-width | Specifies the width of the columns | 3 |
| columns | Shorthand property for setting column-width and column-count | 3 |
Paged Media Properties
| Property | Description | CSS |
|---|---|---|
| fit | Provides a hint on how to scale an element if both its width and height properties are not auto | 3 |
| fit-position | Determines the alignment of the object within the box | 3 |
| image-orientation | Specifies the right or clockwise rotation of the image by the user agent | 3 |
| page | Specifies the type of page where an element should be displayed | 3 |
| size | Specifies the size and orientation of the box containing the page content | 3 |
Positioning Properties
| Property | Description | CSS |
|---|---|---|
| bottom | Sets the offset from the bottom margin edge of a positioned element to the bottom edge of its containing block | 2 |
| clear | Specifies on which sides of an element floating elements are not allowed to float | 1 |
| clip | Clips an absolutely positioned element | 2 |
| cursor | Specifies the type of cursor to be displayed | 2 |
| display | Specifies the type of box an element should generate | 1 |
| float | Specifies whether a box should float | 1 |
| left | Sets the offset from the left margin edge of a positioned element to the left edge of its containing block | 2 |
| overflow <br> | Specifies what happens if content overflows an element's box | 2 |
| position | Specifies the type of positioning for an element | 2 |
| right | Sets the offset from the right margin edge of a positioned element to the right edge of its containing block | 2 |
| top | Sets the offset from the top margin edge of a positioned element to the top edge of its containing block | 2 |
| visibility | Specifies whether an element is visible | 2 |
| z-index | Sets the stack order of an element | 2 |
Print Properties
| Property | Description | CSS |
|---|---|---|
| orphans | Sets the minimum number of lines that must be left at the bottom of a page when a page break occurs inside an element | 2 |
| page-break-after | Sets the page-breaking behavior after an element | 2 |
| page-break-before | Sets the page-breaking behavior before an element | 2 |
| page-break-inside | Sets the page-breaking behavior inside an element | 2 |
| widows | Sets the minimum number of lines that must be left at the top of a page when a page break occurs inside an element | 2 |
Ruby Properties
| Property | Description | CSS | | ruby-align | Controls the text alignment of Ruby text relative to the Ruby base content | 3 | | ruby-overhang | Determines if Ruby text is allowed to partially overhang any adjacent text when it exceeds the base width, except its own base | 3 | | ruby-position | Controls the position of Ruby text relative to its base | 3 | | ruby-span | Controls the spanning behavior of the annotation element | 3 |
Speech Properties
| Property | Description | CSS |
|---|---|---|
| mark | Shorthand property for setting mark-before and mark-after properties | 3 |
| mark-after | Allows named marks to be attached to the audio stream | 3 |
| mark-before | Allows named marks to be attached to the audio stream | 3 |
| phonemes | Specifies a phonetic pronunciation for the text within the corresponding element | 3 |
| rest | Shorthand property for setting rest-before and rest-after properties | 3 |
| rest-after | Specifies a rest or adherence to prosodic boundaries after an element's content is spoken | 3 |
| rest-before | Specifies a rest or adherence to prosodic boundaries before an element's content is spoken | 3 |
| voice-balance | Specifies the balance between left and right channels | 3 |
| voice-duration | Specifies the duration for rendering the content of the selected element | 3 |
| voice-pitch | Specifies the average pitch (frequency) of the speaking voice | 3 |
| voice-pitch-range | Specifies the variation in average pitch | 3 |
| voice-rate | Controls the speaking rate | 3 |
| voice-stress | Indicates the level of stress | 3 |
| voice-volume | Refers to the amplitude of the waveform output for speech synthesis | 3 |
Table Properties
| Property | Description | CSS |
|---|---|---|
| border-collapse | Specifies whether table borders should be collapsed into a single border | 2 |
| border-spacing | Specifies the distance between the borders of adjacent cells | 2 |
| caption-side | Specifies the position of the table caption | 2 |
| empty-cells | Specifies whether to show borders and background on empty cells in a table | 2 |
| table-layout | Sets the layout algorithm to be used for a table | 2 |
Text Properties
| Property | Description | CSS |
|---|---|---|
| color | Sets the color of the text | 1 |
| direction | Specifies the text direction/writing direction | 2 |
| letter-spacing | Sets the character spacing | 1 |
| line-height | Sets the line height | 1 |
| text-align | Specifies the horizontal alignment of text | 1 |
| text-decoration | Specifies the decoration added to text | 1 |
| text-indent | Specifies the indentation of the first line in a text block | 1 |
| text-transform | Controls the capitalization of text | 1 |
| unicode-bidi | 2 | |
| vertical-align | Sets the vertical alignment of an element | 1 |
| white-space | Specifies how white space inside an element is handled | 1 |
| word-spacing | Sets the word spacing | 1 |
| text-emphasis | Apply emphasis marks to text elements and set the foreground color of the emphasis marks. | 1 |
| hanging-punctuation | Specifies whether a punctuation mark may hang outside the line box. | 3 |
| punctuation-trim | Specifies whether a punctuation mark should be trimmed. | 3 |
| text-align-last | Specifies the alignment of the last line when text-align is set to justify. | 3 |
| text-justify | Specifies the justification method when text-align is set to justify. | 3 |
| text-outline | Sets the outline of the text. | 3 |
| text-overflow | Specifies what happens when text overflows the containing element. | 3 |
| text-shadow | Adds a shadow to the text. | 3 |
| text-wrap | Specifies the text wrapping rules. | 3 |
| word-break | Specifies the breaking rules for non-CJK text. | 3 |
| word-wrap | Specifies whether the browser should break long words. | 3 |
2D/3D Transform Properties
| Property | Description | CSS |
|---|---|---|
| transform | Applies a 2D or 3D transformation to an element. | 3 |
| transform-origin | Allows you to change the position of transformed elements. | 3 |
| transform-style | Specifies how nested elements are rendered in 3D space. | 3 |
| perspective | Specifies the perspective from which a 3D element is viewed. | 3 |
| perspective-origin | Specifies the bottom position of 3D elements. | 3 |
| backface-visibility | Defines whether an element should be visible when not facing the screen. | 3 |
Transition Properties
| Property | Description | CSS |
|---|---|---|
| transition | This property is a shorthand for transition-property, transition-duration, transition-timing-function, and transition-delay. | 3 |
| transition-property | Sets the CSS properties to be transitioned. | 3 |
| transition-duration | Sets the duration of the transition. | 3 |
| transition-timing-function | Sets the timing function of the transition. | 3 |
| transition-delay | Specifies when the transition starts. | 3 |
User-interface Properties
| Property | Description | CSS |
|---|---|---|
| appearance | Defines the appearance style of an element. | 3 |
| box-sizing | Allows you to define certain elements to fit an area in a certain way. | 3 |
| icon | Specify an icon for an element | 3 |
| nav-down | Specify where to navigate when the down key is pressed | 3 |
| nav-index | Specify the navigation (tab) order | 3 |
| nav-left | Specify where to navigate when the left key is pressed | 3 |
| nav-right | Specify where to navigate when the right key is pressed | 3 |
| nav-up | Specify where to navigate when the up key is pressed | 3 |
| outline-offset | Set the offset of the outline frame outside the border edge | 3 |
| resize | Define whether an element is resizable | 3 |