CSS Reference Manual
The CSS reference manual on Example Tutorial has been tested in all major browsers.
CSS Properties
CSS property group:
The "CSS" column indicates in which CSS version the property is defined (CSS1, CSS2, or CSS3).
| Property |
Description |
CSS |
| @keyframes |
Define an animation. The animation name defined by @keyframes is used by animation-name. |
3 |
| animation |
Shorthand property. Retrieves or sets the animation effects applied to the object. |
3 |
| animation-name |
Retrieves or sets the animation name applied to the object. It must be used with the @keyframes rule, because 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 of the object's animation. |
3 |
| animation-direction |
Retrieves or sets whether the object’s animation plays in reverse during the loop. |
3 |
| animation-play-state |
Retrieves or sets the state of the object's animation. |
3 |
| Property |
Description |
CSS |
| background |
Shorthand property. Sets the background properties of the object. |
1 |
| background-attachment |
Sets or retrieves whether the background image scrolls with the object’s content or is fixed. The background-image property must be specified 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 object’s background image. The background-image property must be specified first. |
1 |
| background-repeat |
Sets or retrieves how the background image is tiled or filled. The background-image property must be specified first. |
1 |
| background-clip |
Specifies the area to which the object’s background image is clipped. |
3 |
| background-origin |
Sets or retrieves the reference origin (position) used when calculating background-position for the object’s background image. |
3 |
| background-size |
Retrieves or sets the size of the object’s background image. |
3 |
| Property |
Description |
CSS |
| border |
Shorthand property. Sets the border properties of the object. |
1 |
| border-bottom |
Shorthand property. Sets the characteristics of the object's bottom border. |
1 |
| border-bottom-color |
Sets or retrieves the bottom border color of an object. |
1 |
| border-bottom-style |
Sets or retrieves the bottom border style of an object. |
1 |
| border-bottom-width |
Sets or retrieves the bottom border width of an object. |
1 |
| border-color |
Sets or retrieves the border color of the object. |
1 |
| border-left |
Shorthand property. Sets the properties 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 |
Shorthand property. Sets the properties 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 border style of the object. |
1 |
| border-top |
Shorthand property. Sets the characteristics of the object's top border. |
1 |
| border-top-color |
Sets or retrieves the top border color of an object. |
1 |
| border-top-style |
Sets or retrieves the top border style of an object. |
1 |
| border-top-width |
Sets or retrieves the top border width of an object. |
1 |
| border-width |
Sets or retrieves the border width of the object. |
1 |
| outline |
Shorthand property. Sets or retrieves the outline outside the object. |
2 |
| outline-color |
Sets or retrieves the color of the outline outside the object. |
2 |
| outline-style |
Sets or retrieves the style of the outline outside the object. |
2 |
| outline-width |
Sets or retrieves the width of the outline outside the object. |
2 |
| border-bottom-left-radius |
Sets or retrieves the rounded border of the object’s bottom-left corner. Two parameters are provided, separated by a space. Each parameter accepts one value; the first value represents the horizontal radius, and the second 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 border of the object’s bottom-right corner. |
3 |
| border-image |
Sets or retrieves the object’s border style using an image to fill it. |
3 |
| border-image-outset |
Specifies the amount by which the border image exceeds the border. |
3 |
| border-image-repeat |
Specifies whether the image border should be repeated, stretched, or rounded. |
3 |
| border-image-slice |
Specifies the inward offset of the image border. |
3 |
| border-image-source |
Specifies the image to be used instead of the border style set by the border-style property. |
3 |
| border-image-width |
Specifies the width of the image border. |
3 |
| border-radius |
Sets or retrieves whether the object uses rounded borders. |
3 |
| border-top-left-radius |
Defines the shape of the top-left border. |
3 |
| border-top-right-radius |
Defines the shape of the top-right border. |
3 |
| box-decoration-break |
Specifies whether inline elements are wrapped. |
3 |
| box-shadow |
Adds one or more shadows to the box. |
3 |
| Property |
Description |
CSS |
| overflow-x |
Whether to clip the left/right edges of the content if it overflows the element’s content area. |
3 |
| overflow-y |
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 overflowed elements. |
3 |
| rotation |
Rotates the element around the point defined by the rotation-point property. |
3 |
| rotation-point |
Defines the offset point from the upper-left border edge. |
3 |
| Property |
Description |
CSS |
| color-profile |
Allows specifications other than the default color profile of the source. |
3 |
| opacity |
Sets the transparency level of an element. |
3 |
| rendering-intent |
Allows specifications other than the default color profile rendering intent. |
3 |
| Property |
Description |
CSS |
| padding |
Sets all padding properties in a single 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 |
| Property |
Description |
CSS |
| bookmark-label |
Specifies the label of a bookmark. |
3 |
| bookmark-level |
Specifies the bookmark level. |
3 |
| bookmark-target |
Specifies the target of the bookmark link. |
3 |
| float-offset |
Pushes floating elements in the opposite direction; they always have float. |
3 |
| hyphenate-after |
Specifies the minimum number of characters after the hyphenation character of a hyphenated word. |
3 |
| hyphenate-before |
Specifies the minimum number of characters before the hyphenation character of a hyphenated word. |
3 |
| hyphenate-character |
Specifies the string to be displayed when hyphenation occurs. |
3 |
| hyphenate-lines |
Indicates the maximum number of consecutive hyphenated lines in an element. |
3 |
| hyphenate-resource |
Specifies a comma-separated list of external resources that can help determine the browser's hyphenation points. |
3 |
| hyphens |
Sets how to split words to improve the layout of the paragraph. |
3 |
| image-resolution |
Specifies the correct image resolution. |
3 |
| marks |
Adds crop and/or cross marks to the document. |
3 |
| string-set |
|
3 |
| Property |
Description |
CSS |
| height |
Sets the height of an element. |
1 |
| max-height |
Sets the maximum height of an element. |
2 |
| max-width |
Sets the maximum width of an element. |
2 |
| min-height |
Sets the minimum height of an element. |
2 |
| min-width |
Sets the minimum width of an element. |
2 |
| width |
Sets the width of an element. |
1 |
| Property |
Description |
CSS |
| flex |
Shorthand property. Sets or retrieves how the child elements of the flexible box model object allocate space. |
3 |
| flex-grow |
Sets or retrieves the expansion ratio of the flexible box. |
3 |
| flex-shrink |
Sets or retrieves the contraction ratio of the flexible box. |
3 |
| flex-basis |
Sets or retrieves the flex basis value of the flexible box. |
3 |
| flex-flow |
Shorthand property. Sets or retrieves the arrangement of the child elements of the flexible box model object. |
3 |
| flex-direction |
This property determines the position of flex items in the flex container by defining the direction of the flex container’s main axis. |
3 |
| flex-wrap |
This property controls whether the flex container is single-line or multi-line, and the direction of the cross axis determines the direction in which new lines are stacked. |
3 |
| align-content |
Aligns the items in the flex container (vertically) when they do not occupy all available space on the cross axis. |
3 |
| align-items |
Defines the alignment of flex items along the side axis (vertical axis) of the current line in the flex container. |
3 |
| align-self |
Defines the alignment of a flex item individually along the side axis (vertical axis). |
3 |
| justify-content |
Sets or retrieves the alignment of the flexible box element along the main axis (horizontal axis). |
3 |
| order |
Sets or retrieves the order in which the child elements of the flexible box model object appear. |
3 |
| 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 the child elements of a box are flexible or fixed size. |
3 |
| box-flex-group |
Assigns flexible elements to a Flex group. |
3 |
| box-lines |
Specifies whether to wrap to a new row/column whenever 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 the child elements of a box should be laid out horizontally or vertically. |
3 |
| box-pack |
Specifies the horizontal and vertical positions of horizontal boxes within a vertical box. |
3 |
| Property |
Description |
CSS |
| font |
Sets all font properties in a single 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 of text. |
1 |
| font-variant |
Specifies the font style of text. |
1 |
| font-weight |
Specifies the weight of a font. |
1 |
| @font-face |
A rule that allows websites to download and use fonts other than the “Web-safe” fonts. |
3 |
| font-size-adjust |
Specifies the aspect value for an element. |
3 |
| font-stretch |
Condenses or stretches the current font family. |
3 |
| 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 quotation type for nested references. |
2 |
| crop |
Allows a replaced element to act as an object that replaces the rectangular area of the entire object. |
3 |
| move-to |
Removes an element from the flow, then reinserts it at a later point in the document. |
3 |
| page-policy |
Determines the string value of a given element applicable to counters based on the page. |
3 |
| Property |
Description |
CSS |
| grid-column |
Sets the start and end positions of the column of a grid element. |
3 |
| grid-row |
Sets the start and end positions of the row of a grid element. |
3 |
| Property |
Description |
CSS |
| target |
Shorthand property that sets the target-name, target-new, and target-position properties. |
3 |
| target-name |
Specifies where to open the link (target position). |
3 |
| target-new |
Specifies whether a new target link opens a new window or opens a new tab in an existing window. |
3 |
| target-position |
Specifies where a new target link should be placed. |
3 |
| Property |
Description |
CSS |
| alignment-adjust |
Allows more precise alignment of elements. |
3 |
| alignment-baseline |
How inline-level elements specified by their parent are aligned. |
3 |
| baseline-shift |
Allows repositioning of the dominant-baseline relative to the dominant-baseline. |
3 |
| dominant-baseline |
Specifies scaled-baseline-table |
3 |
| drop-initial-after-adjust |
Sets the initial alignment point of the primary connection point of the drop cap. |
3 |
| drop-initial-after-align |
Calibrates the initial line setting within a line; that is, the box with the initial letter uses the primary connection point. |
3 |
| drop-initial-before-adjust |
Sets the initial alignment point of the secondary connection point of the drop cap. |
3 |
| drop-initial-before-align |
Calibrates the initial line setting within a line; that is, the box with the initial letter uses the secondary connection point. |
3 |
| drop-initial-size |
Controls the drop cap of the initial letter. |
3 |
| drop-initial-value |
Activates a dropdown-style initial effect. |
3 |
| inline-box-align |
Sets the alignment of lines within a multi-line inline block that have preceding and following inline elements. |
3 |
| line-stacking |
A shorthand property that sets the line-stacking-strategy, line-stacking-ruby, and line-stacking-shift properties. |
3 |
| line-stacking-ruby |
Sets the stacking method of lines containing Ruby annotation elements relative to block elements. |
3 |
| line-stacking-shift |
Sets the stacking method of block elements contained in base-shift lines. |
3 |
| line-stacking-strategy |
Sets the stacking method of stacking line boxes that internally contain block elements. |
3 |
| text-height |
Sets the block-progression dimension of the text content area of an inline box. |
3 |
| Property |
Description |
CSS |
| margin |
Sets all margin properties in a single 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 |
| Property |
Description |
CSS |
| marquee-direction |
Sets the direction of content movement. |
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 content movement. |
3 |
| Property |
Description |
CSS |
| column-count |
Specifies the number of columns the element should be divided into. |
3 |
| column-fill |
Specifies how to fill columns. |
3 |
| column-gap |
Specifies the gap between columns. |
3 |
| column-rule |
A shorthand property for setting all column-rule-* properties. |
3 |
| column-rule-color |
Specifies the color rule between columns. |
3 |
| column-rule-style |
Specifies the style rule between columns. |
3 |
| column-rule-width |
Specifies the width rule between columns. |
3 |
| column-span |
Specifies how many columns the element should span. |
3 |
| column-width |
Specifies the width of columns. |
3 |
| columns |
Shorthand property sets column width and column count. |
3 |
| Property |
Description |
CSS |
| fit |
If neither its width nor height property is auto, gives a hint as to how to scale the replaced element. |
3 |
| fit-position |
Determines the alignment of objects inside the box. |
3 |
| image-orientation |
Specifies the rotation to the right or in the clockwise direction that the user agent applies to the image. |
3 |
| page |
Specifies the specific type of page on which an element should be displayed. |
3 |
| size |
Specifies the size and orientation of the page content containing the box. |
3 |
| Property |
Description |
CSS |
| bottom |
Sets the offset between the bottom margin edge of a positioned element and the bottom edge of its containing block. |
2 |
| clear |
Specifies on which side of the element other floating elements are not allowed. |
1 |
| clip |
Clips absolutely positioned elements. |
2 |
| cursor |
Specifies the type (shape) of the cursor to be displayed. |
2 |
| display |
Specifies the type of box the element should generate. |
1 |
| float |
Specifies whether the box should float. |
1 |
| left |
Sets the offset between the left margin edge of a positioned element and the left edge of its containing block. |
2 |
overflow
|
Specifies what happens when content overflows the element box. |
2 |
| position |
Specifies the positioning type of the element. |
2 |
| right |
Sets the offset between the right margin edge of a positioned element and the right edge of its containing block. |
2 |
| top |
Sets the offset between the top margin edge of a positioned element and the top edge of its containing block. |
2 |
| visibility |
Specifies whether the element is visible. |
2 |
| z-index |
Sets the stacking order of the element. |
2 |
| Property |
Description |
CSS |
| orphans |
Sets the minimum number of lines that must be retained at the bottom of the page when a page break occurs inside the element. |
2 |
| page-break-after |
Sets the page break behavior after the element. |
2 |
| page-break-before |
Sets the page break behavior before the element. |
2 |
| page-break-inside |
Sets the page break behavior inside the element. |
2 |
| widows |
Sets the minimum number of lines that must be retained at the top of the page when a page break occurs inside the element. |
2 |
| Property |
Description |
CSS |
| ruby-align |
Controls the text alignment of Ruby text and Ruby base content relative to each other. |
3 |
| ruby-overhang |
When Ruby text exceeds the width of the Ruby base, determines whether the Ruby text is allowed to partially overhang any adjacent text other than its own base. |
3 |
| ruby-position |
Its base controls the position of the Ruby text. |
3 |
| ruby-span |
Controls the spanning behavior of annotation elements. |
3 |
| Property |
Description |
CSS |
| mark |
A shorthand property that sets the mark-before and mark-after properties. |
3 |
| mark-after |
Allows named markers to be connected to the audio stream. |
3 |
| mark-before |
Allows named markers to be connected to the audio stream. |
3 |
| phonemes |
Specifies a phonetic pronunciation in the corresponding element containing the text. |
3 |
| rest |
A shorthand property that sets the rest-before and rest-after properties. |
3 |
| rest-after |
After the content of an element has been spoken, specifies whether to pause or honor a prosodic boundary. |
3 |
| rest-before |
Before the content of an element has been spoken, specifies whether to pause or honor a prosodic boundary. |
3 |
| voice-balance |
Specifies the balance between the left and right channels. |
3 |
| voice-duration |
Specifies the duration that should be taken to present 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 speech rate |
3 |
| voice-stress |
Indicates the emphasis intensity. |
3 |
| voice-volume |
Speech synthesis refers to the amplitude of the waveform output. |
3 |
| Property |
Description |
CSS |
| border-collapse |
Specifies whether to collapse table borders. |
2 |
| border-spacing |
Specifies the distance between adjacent cell borders. |
2 |
| caption-side |
Specifies the position of the table caption. |
2 |
| empty-cells |
Specifies whether to display borders and backgrounds on empty cells in a table. |
2 |
| table-layout |
Sets the layout algorithm used for the table. |
2 |
| Property |
Description |
CSS |
| color |
Sets the color of the text. |
1 |
| direction |
Specifies the direction / writing direction of the text. |
2 |
| letter-spacing |
Sets the character spacing. |
1 |
| line-height |
Sets line height |
1 |
| text-align |
Specifies the horizontal alignment of text. |
1 |
| text-decoration |
Specifies the decoration effect added to text. |
1 |
| text-indent |
Specifies the indentation of the first line of a text block. |
1 |
| text-transform |
Controls the capitalization of text. |
1 |
| unicode-bidi |
|
2 |
| vertical-align |
Sets the vertical alignment of the element. |
1 |
| white-space |
Sets how whitespace is handled within an element. |
1 |
| word-spacing |
Sets the word spacing. |
1 |
| text-emphasis |
Apply emphasis marks to the element's text and the foreground color of the emphasis marks. |
1 |
| hanging-punctuation |
Specify whether a punctuation mark may overflow the line box. |
3 |
| punctuation-trim |
Specifies whether a punctuation mark should be removed. |
3 |
| text-align-last |
The alignment of the last line when text-align is set to justify. |
3 |
| text-justify |
Specify the justification method when text-align is set to justify. |
3 |
| text-outline |
Sets the outline of the text. |
3 |
| text-overflow |
Specify what should happen 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 line-breaking rules for non-CJK text. |
3 |
| word-wrap |
Set whether the browser should wrap overly long words. |
3 |
| Property |
Description |
CSS |
| transform |
Applies to elements with 2D or 3D transformations. |
3 |
| transform-origin |
Allows you to change the position of the transformed element. |
3 |
| transform-style |
Specifies how nested elements are displayed in 3D space. |
3 |
| perspective |
Specifies how 3D elements are viewed in perspective. |
3 |
| perspective-origin |
Specifies the bottom position of a 3D element. |
3 |
| backface-visibility |
Define whether an element should be visible when not facing the screen. |
3 |
| Property |
Description |
CSS |
| appearance |
Defines the appearance style of the element. |
3 |
| box-sizing |
Allows you to define certain elements in a certain way to fit the area. |
3 |
| icon |
Specifies an icon for an element. |
3 |
| nav-down |
Specify the position to navigate down when the user presses the down arrow key. |
3 |
| nav-index |
Specifies the navigation (tab) order. |
3 |
| nav-left |
Specify the position to navigate left when the user presses the left arrow key. |
3 |
| nav-right |
Specify the position to navigate right when the user presses the right arrow key. |
3 |
| nav-up |
Specify the position to navigate up when the user presses the up arrow key. |
3 |
| outline-offset |
Set the offset of the outline outside the border edge. |
3 |
| resize |
Defines whether an element can be resized. |
3 |
other extensions