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 together with the @keyframes rule because the animation name is defined by @keyframes. |
3 |
| animation-duration |
Retrieves or sets the duration of an object's animation. |
3 |
| animation-timing-function |
Retrieves or sets the transition type of an object's animation. |
3 |
| animation-delay |
Retrieves or sets the delay time of an object's animation. |
3 |
| animation-iteration-count |
Retrieves or sets the number of animation loops for an object. |
3 |
| animation-direction |
Retrieves or sets whether the object's animation reverses direction in a loop. |
3 |
| animation-play-state |
Retrieves or sets the state of an object's animation. |
3 |
| Property |
Description |
CSS |
| background |
Shorthand property. Sets the background features 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 an object. |
1 |
| background-image |
Sets or retrieves the background image of an 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 object's background image is tiled/filled. The background-image property must be specified first. |
1 |
| background-clip |
Specifies the area of the object's background image to be cropped outward. |
3 |
| background-origin |
Sets or retrieves the reference origin (position) for calculating background-position of 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 features of the object. |
1 |
| border-bottom |
Shorthand property. Sets the characteristics of the bottom border of an object. |
1 |
| border-bottom-color |
Set or retrieve the bottom border color of an object. |
1 |
| border-bottom-style |
Set or retrieve the bottom border style of an object. |
1 |
| border-bottom-width |
Set or retrieve the bottom border width of an object. |
1 |
| border-color |
Sets or retrieves the border color of an object. |
1 |
| border-left |
Shorthand property. Sets the features 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 features 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 an object. |
1 |
| border-top |
Shorthand property. Sets the characteristics of the top border of an object. |
1 |
| border-top-color |
Set or retrieve the top border color of an object. |
1 |
| border-top-style |
Set or retrieve the top border style of an object. |
1 |
| border-top-width |
Set or retrieve the top border width of an object. |
1 |
| border-width |
Sets or retrieves the border width of an object. |
1 |
| outline |
Shorthand property. Sets or retrieves the outline of lines 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 lower-left corner. It takes 2 parameters separated by a space; each parameter accepts 1 value. The first parameter 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 lower-right corner. |
3 |
| border-image |
Sets or retrieves the object's border style filled with an image. |
3 |
| border-image-outset |
Specifies the amount by which the border image extends beyond 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 use, replacing 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 an object uses rounded border corners. |
3 |
| border-top-left-radius |
Defines the shape of the top-left corner border. |
3 |
| border-top-right-radius |
Defines the shape of the top-right corner border. |
3 |
| box-decoration-break |
Specifies whether inline elements are wrapped. |
3 |
| box-shadow |
Adds one or more shadows to a box. |
3 |
| Property |
Description |
CSS |
| overflow-x |
If the content overflows the element's content area, whether to clip the left/right edges of the content. |
3 |
| overflow-y |
If the content overflows the element's content area, whether to clip the top/bottom edges of the content. |
3 |
| overflow-style |
Specifies the preferred scrolling method for overflowing 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 of the source's color profile. |
3 |
| opacity |
Sets the transparency level of an element. |
3 |
| rendering-intent |
Allows other specifications beyond the default rendering intent of the color profile. |
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 |
Set the top padding of an element. |
1 |
| Property |
Description |
CSS |
| bookmark-label |
Specify the label of a bookmark. |
3 |
| bookmark-level |
Specify the bookmark level. |
3 |
| bookmark-target |
Specify the target of a bookmark link. |
3 |
| float-offset |
Pushes floating elements in the opposite direction, and they remain floated. |
3 |
| hyphenate-after |
Specifies the minimum number of characters after the hyphen character of a hyphenated word. |
3 |
| hyphenate-before |
Specifies the minimum number of characters before the hyphen character of a hyphenated word. |
3 |
| hyphenate-character |
Specifies the string to be displayed when a 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 the browser determine hyphenation points. |
3 |
| hyphens |
Sets how words are split 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 |
Set 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 |
Set the width of an element. |
1 |
| Property |
Description |
CSS |
| flex |
Shorthand property. Sets or retrieves how the child elements of the flex box model object allocate space. |
3 |
| flex-grow |
Sets or retrieves the flex grow ratio of a flexbox. |
3 |
| flex-shrink |
Sets or retrieves the flex shrink ratio of a flexbox. |
3 |
| flex-basis |
Sets or retrieves the flex basis value of a flexbox. |
3 |
| flex-flow |
Shorthand property. Sets or retrieves the arrangement of the child elements of the flex box model object. |
3 |
| flex-direction |
This property determines the position of flex children in the flex container by defining the direction of the main axis of the flex container. |
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 items in the flex container (vertically) when the items do not occupy all available space on the cross axis. |
3 |
| align-items |
Defines the alignment of flex children in the cross axis (vertical axis) direction of the current line in the flex container. |
3 |
| align-self |
Defines the alignment of an individual flex child in the cross axis (vertical axis) direction. |
3 |
| justify-content |
Sets or retrieves the alignment of the flex box element in the main axis (horizontal axis) direction. |
3 |
| order |
Sets or retrieves the order in which the child elements of the flex box model object appear. |
3 |
| Property |
Description |
CSS |
| box-align |
Specifies how to align the child elements of a box. |
3 |
| box-direction |
Specifies in which direction a box's child elements 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 a flex group. |
3 |
| box-lines |
Specifies whether to start a new line/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 a box's child elements should be laid out horizontally or vertically. |
3 |
| box-pack |
Specifies the horizontal position and vertical position of a horizontal box within a vertical box. |
3 |
| Property |
Description |
CSS |
| font |
Sets all font properties in a single declaration. |
1 |
| font-family |
Specifies the font family of the text. |
1 |
| font-size |
Specifies the font size of the text. |
1 |
| font-style |
Specifies the font style of the text. |
1 |
| font-variant |
Specifies the font style of the text. |
1 |
| font-weight |
Specify the weight of the font. |
1 |
| @font-face |
A rule that allows websites to download and use fonts beyond the "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 |
| Property |
Description |
CSS |
| content |
Used together 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 quotes. |
2 |
| crop |
Allows a replaced element to simply act as an object replacing the rectangular area of the whole object. |
3 |
| move-to |
Removes the element from the flow and re-inserts it at a later point in the document. |
3 |
| page-policy |
Determines the string value applicable to a counter for a given element based on the page. |
3 |
| Property |
Description |
CSS |
| grid-column |
Sets the start and end positions of the grid element's columns. |
3 |
| grid-row |
Sets the start and end positions of the grid element's rows. |
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 the new target link should be placed. |
3 |
| Property |
Description |
CSS |
| alignment-adjust |
Allows more precise alignment of elements. |
3 |
| alignment-baseline |
How the inline-level elements designated 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. |
3 |
| drop-initial-after-align |
Calibrates the initial line setting within the 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. |
3 |
| drop-initial-before-align |
Calibrates the initial line setting within the line; that is, the box with the initial letter uses the secondary connection point. |
3 |
| drop-initial-size |
Controls the local dropped initial (drop cap). |
3 |
| drop-initial-value |
Activates a drop-down style initial effect. |
3 |
| inline-box-align |
Sets the alignment of lines within a multi-line inline block with 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 containing elements in the base-shift line. |
3 |
| line-stacking-strategy |
Sets the stacking method of 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 |
| list-style |
Sets all list properties in one declaration. |
1 |
| list-style-image |
Sets an image as the list item marker. |
1 |
| list-style-position |
Sets the placement position of the list item marker. |
1 |
| list-style-type |
Sets the type of the list item marker. |
1 |
| Property |
Description |
CSS |
| margin |
Sets all 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 |
| 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 an element should be divided into. |
3 |
| column-fill |
Specify 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 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. |
3 |
| column-width |
Specify the width of columns. |
3 |
| columns |
Shorthand property for setting column width and column count. |
3 |
| Property |
Description |
CSS |
| fit |
If neither its width nor height attribute is auto, gives a hint on how to scale the replaced element. |
3 |
| fit-position |
Specifies the alignment of objects inside a box. |
3 |
| image-orientation |
Specifies a clockwise rotation applied to the image by the user agent. |
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 the positioned element and the bottom edge of its containing block. |
2 |
| clear |
Specifies which side of the element does not allow other floating elements. |
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 an element should generate. |
1 |
| float |
Specifies whether a box should float. |
1 |
| left |
Sets the offset between the left margin edge of the 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 an element. |
2 |
| right |
Sets the offset between the right margin edge of the positioned element and the right edge of its containing block. |
2 |
| top |
Sets the offset between the top margin edge of the positioned element and the top edge of its containing block. |
2 |
| visibility |
Specifies whether an element is visible. |
2 |
| z-index |
Sets the stacking order of an element. |
2 |
| 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 break behavior after an element. |
2 |
| page-break-before |
Sets the page break behavior before an element. |
2 |
| page-break-inside |
Sets the page break 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 |
| 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 besides its own base. |
3 |
| ruby-position |
Its base controls the position of the Ruby text. |
3 |
| ruby-span |
Controls the spanning behavior of the annotation element. |
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 an audio stream. |
3 |
| mark-before |
Allows named markers to be connected to an 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 |
Specifies whether to take a pause or follow prosodic boundaries after the content of an element is spoken. |
3 |
| rest-before |
Specifies whether to take a pause or follow prosodic boundaries before the content of an element is spoken. |
3 |
| voice-balance |
Specifies the balance between the left and right channels. |
3 |
| voice-duration |
Specifies the duration to take when 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 speech rate |
3 |
| voice-stress |
Indicate emphasis strength. |
3 |
| voice-volume |
In speech synthesis, specifies 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 |
Set the color of text. |
1 |
| direction |
Specifies the direction / writing direction of the text. |
2 |
| letter-spacing |
Set character spacing. |
1 |
| line-height |
Sets line height |
1 |
| text-align |
Specifies the horizontal alignment of the text. |
1 |
| text-decoration |
Specifies the decoration effect added to the 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 an element. |
1 |
| white-space |
Sets how whitespace is handled within an element. |
1 |
| word-spacing |
Set word spacing. |
1 |
| text-emphasis |
Apply emphasis marks and the foreground color of the emphasis marks to an element's text. |
1 |
| hanging-punctuation |
Specifies whether a punctuation character may overflow the line box. |
3 |
| punctuation-trim |
Specifies whether a punctuation mark should be removed. |
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 should happen when text overflows the containing element. |
3 |
| text-shadow |
Add a shadow to text. |
3 |
| text-wrap |
Specifies the text wrapping rules. |
3 |
| word-break |
Specifies the line breaking rules for non-CJK text. |
3 |
| word-wrap |
Sets whether the browser breaks overly long words. |
3 |
| Property |
Description |
CSS |
| transform |
Applies to elements with 2D or 3D transformations. |
3 |
| transform-origin |
Allows you to change the origin position of a transformed element. |
3 |
| transform-style |
Specifies how elements are nested in 3D space. |
3 |
| perspective |
Specifies how 3D elements are viewed in perspective. |
3 |
| perspective-origin |
Specify the bottom position of a 3D element. |
3 |
| backface-visibility |
Defines whether an element should be visible when it is not facing the screen. |
3 |
| 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 that are used for transitions. |
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 begins. |
3 |
| Property |
Description |
CSS |
| appearance |
Defines the appearance style of an element. |
3 |
| box-sizing |
Allows you to define certain elements in a way that fits an area. |
3 |
| icon |
Specify an icon for an element. |
3 |
| nav-down |
Specifies the location to navigate down when the user presses the Down arrow key. |
3 |
| nav-index |
Specifies the navigation (tab) order. |
3 |
| nav-left |
Specifies the location to navigate left when the user presses the Left arrow key. |
3 |
| nav-right |
Specifies the location to navigate right when the user presses the Right arrow key. |
3 |
| nav-up |
Specifies the location to navigate up when the user presses the Up arrow key. |
3 |
| outline-offset |
Sets the offset of the outline outside the border edge. |
3 |
| resize |
Defines whether an element can be resized. |
3 |
other extensions