css - references
This is a complete reference guide for web developers where haved we listed all the CSS properties defined in the World Wide Web Consortium's Recommended Specification for Cascading Style Sheets, Level 2
Click any property to see its description with examples:
| Property | Description |
|---|---|
| azimuth | Describes the position of a sound source along the horizontal axis of the listener's environment. |
| background |
Composite property for the following properties:
|
| background-attachment | Determines if the background image is fixed in the window or scrolls as the document scrolls |
| background-color | Sets the background color of an element |
| background-image | Sets the background image of an element |
| background-position | Sets the initial position of the element's background image, if specified; values normally are paired to provide x, y positions; default position is 0% 0%. |
| background-repeat | Determines how the background image is repeated (tiled) across an element |
| border | Sets all four of an element's borders; value is one or more of a color, a value for border-width, and a value for border-style |
| border-bottom | Sets an element's bottom border; value is one or more of a color, a value for border-bottom-width, and a value for border-style |
| border-bottom-width | Sets the thickness of an element's bottom border. |
| border-collapse | Sets the table border rendering algorithm |
| border-color | Sets the color of all four of an element's borders; default is the color of the element |
| border-left-color | Sets the color of an element's left borders; default is the color of the element |
| border-right-color | Sets the color of an element's right borders; default is the color of the element |
| border-top-color | Sets the color of an element's top borders; default is the color of the element |
| border-bottom-color | Sets the color of an element's bottom borders; default is the color of the element |
| border-left | Sets an element's left border; value is one or more of a color, a value for border-left-width, and a value for border-style. |
| border-left-width | Sets the thickness of an element's left border |
| border-right | Sets an element's right border; value is one or more of a color, a value for border-right-width, and a value for border-style. |
| border-right-width | Sets the thickness of an element's right border |
| border-spacing | With separate borders set the spacing between borders. One value sets vertical and horizontal spacing and two values sets horizontal and vertical spacing respectively. |
| border-style | Sets the style of all four of an element's borders |
| border-top | Sets an element's top border; value is one or more of a color, a value for border-top-width, and a value for border-style |
| border-top-width | Sets the thickness of an element's top border. |
| border-width | Sets the thickness of all four of an element's borders |
| bottom | Used with the position property to place the bottom edge of an element |
| caption-side | Sets the position for a table caption |
| clear | Sets which margins of an element must not be adjacent to a floating element; the element is moved down until that margin is clear |
| clip | Sets the clipping mask for an element |
| color | Sets the color of an element |
| content | Inserts generated content around an element. |
| counter-increment | Increments a counter by 1; value is a list of counter names, with each name optionally followed by a value by which it is incremented. |
| counter-reset | Resets a counter to zero; value is a list of counter names, with each name optionally followed by a value to which it is reset. |
| cue-after | Plays the designated sound after an element is spoken |
| cue-before | Plays the designated sound before an element is spoken |
| cursor | Defines shap of the cursor |
| direction | Defines direction of the flow of an element content |
| display | Controls how an element is displayed |
| elevation | Sets the height at which a sound is played |
| empty-cells | With separate borders, hides empty cells in a table |
| float | Determines if an element floats to the left or right, allowing text to wrap around it or be displayed inline |
| font |
Sets all the font attributes for an element. Value is any of the values for:
|
| font-family | Defines the font for an element, either as a specific font or as one of the generic serif, sans-serif, cursive, fantasy, and monospace. |
| font-size | Defines the font size |
| font-size-adjust | Adjusts the current font's aspect ratio |
| font-stretch | Determines the amount to stretch the current font |
| font-style | Defines the style of the face, either normal or some type of slanted style |
| font-variant | Defines a font to be in small caps |
| font-weight | Defines the font weight . if a number is used, it must be a multiple of 100 between 100 and 900; 400 is normal, 700 is the same as the keyword bold |
| height | Defines the height of an element |
| left | Used with the position property to place the left edge of an element |
| letter-spacing | Inserts additional space between text characters |
| line-height | Sets the distance between adjacent text baselines |
| list-style |
Defines list-related styles using any of the values for:
|
| list-style-image |
Defines an image to be used as a list item's marker, in lieu of the value for:
|
| list-style-position | Indents or extends (default) a list item's marker with respect to the item's content |
| list-style-type | Defines a list item's marker either for unordered lists (circle, disc, or square) or for ordered lists (decimal, loweralpha, lower-roman, none, upper-alpha, or upper-roman) |
| margin | Defines all four of an element's margins |
| margin-bottom | Defines the bottom margin of an element. Default value is 0. |
| margin-left | Defines the left margin of an element. Default value is 0. |
| margin-right | Defines the right margin of an element. Default value is 0. |
| margin-top | Defines the top margin of an element. Default value is 0. |
| marker-offset | The marker-offset property can be used in bulleted lists for specifying the distance between the nearest border edges of a marker box (or bullet) and its associated principal box. |
| marks | The marks property is used to set crop marks and cross marks on paged media. This is used with the @page rule. |
| max-height | max-height property is used to constrain the height of an element. |
| max-width | max-width property is used to set the maximum width of an element. |
| min-height | min-height property is used to constrain the height of an element. |
| min-width | min-width property is used to constrain the width of an element. |
| orphans | Sets the minimum number of lines allowed in an orphaned paragraph fragment |
| outline | The outline property is a shorthand property to specify all outline properties. |
| outline-color | The outline-color property is used to specify the color of the outline. Note that, unlike the border property, outline does not take up extra space and it can be non-rectangular. |
| outline-color-style | The outline-style property is used to specify the style of the outline. Note that, unlike the border property, outline does not take up extra space and it can be non-rectangular. |
| outline-width | The outline-color property is used to specify the color of the outline. Note that, unlike the border property, outline does not take up extra space and it can be non-rectangular. |
| overflow | Determines how overflow content is rendered |
| padding | Defines all four padding amounts around an element |
| padding-bottom | Defines the bottom padding of an element. Default value is 0 |
| padding-left | Defines the left padding of an element. Default value is 0 |
| padding-right | Defines the right padding of an element. Default value is 0 |
| padding-top | Defines the top padding of an element. Default value is 0 |
| page | Associates a named page layout with an element |
| page-break-after | Forces or suppresses page breaks after an element. |
| page-break-before | Forces or suppresses page breaks before an element. |
| page-break-inside | Suppresses page breaks within an element |
| pause | The pause property is CSS shorthand for specifying shorthand property for specifying pauses in aural media. |
| pause-after | Pauses a media after speaking an element |
| pause-before | Pauses a media before speaking an element |
| pitch | Sets the average pitch of an element's spoken content |
| pitch-range | Sets the range of the pitch, from 0 (flat) to 100 (broad); default is 50 |
| play-during | If a URL is provided, it is played during an element's spoken content . specifying repeat loops the audio; mix causes it to mix with, rather than replace, other background audio. |
| position | Sets the positioning model for an element |
| quotes | Sets the quote symbols used to quote text |
| richness | Sets the richness of the voice, from 0 (flat) to 100 (mellifluous); default is 50 |
| right | Used with the position property to place the right edge of an element. |
| size | The size property is used in paged media to specify the size of the page. |
| speak | Determines how an element's content is spoken. |
| speak-header | Determines if table headers are spoken once for each row or column or each time a cell is spoken. |
| speak-numeral | Determines how numerals are spoken |
| speak-punctuation | Determines if punctuation is spoken or used for inflection |
| speech-rate | Sets the rate of speech; a number sets the rate in words per minute |
| stress | Sets the stress of the voice, from 0 (catatonic) to 100 (hyperactive); default is 50. |
| table-layout | Determines the table-rendering algorithm |
| text-align | Sets the text alignment style for an element |
| text-decoration | Defines any decoration for the text; values may be combined |
| text-indent | Defines the indentation of the first line of text in an element; default is 0 |
| text-shadow | Creates text drop shadows of varying colors and offsets |
| text-transform | Transforms the text in the element accordingly |
| top | Used with the position property to place the top edge of an element. |
| vertical-align | Sets the vertical positioning of an element |
| visibility | Determines if an element is visible in the document or table |
| voice-family | Selects a named voice family to speak an element's content |
| volume | Sets the volume of spoken content; numeric values range from 0 to 100 |
| white-space | Defines how whitespace within an element is handled |
| widows | Sets the minimum number of lines allowed in a widowed paragraph fragment |
| width | Defines the width of an element |
| word-spacing | Inserts additional space between words |
| z-index | Sets the rendering layer for the current element. |
Pseudo-classes & Pseudo-elements:
| Property | Description |
|---|---|
| :active | Use this class to add special effect to an activated element |
| :focus | Use this class to add special effect to an element while the element has focus |
| :hover | Use this class to add special effect to an element when you mouse over it |
| :link | Use this class to add special effect to an unvisited link |
| :visited | Use this class to add special effect to a visited link |
| :first-child | Use this class to add special effect to an element that is the first child of some other element. |
| :lang | Use this class to specify a language to use in a specified element |
| :first-letter | Use this element to add special effect to the first letter of a text |
| :first-line | Use this element to add special effect to the first line of a text |
| :before | Use this element to insert some content before an element |
| :after | Use this element to insert some content after an element |
