CSS2 - Reference Guide
This is a complete reference guide for web developers where we have 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 −
| Sr.No. | Property & Description |
|---|---|
| 1 | azimuth Describes the position of a sound source along the horizontal axis of the listener's environment. |
| 2 | background Composite property for the following properties −
|
| 3 | background-attachment Determines if the background image is fixed in the window or scrolls as the document scrolls. |
| 4 | background-color Sets the background color of an element. |
| 5 | background-image Sets the background image of an element. |
| 6 | 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%. |
| 7 | background-repeat Determines how the background image is repeated (tiled) across an element. |
| 8 | 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. |
| 9 | 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. |
| 10 | border-bottom-width Sets the thickness of an element's bottom border. |
| 11 | border-collapse Sets the table border rendering algorithm. |
| 12 | border-color Sets the color of all four of an element's borders; default is the color of the element. |
| 13 | border-left-color Sets the color of an element's left borders; default is the color of the element. |
| 14 | border-right-color Sets the color of an element's right borders; default is the color of the element. |
| 15 | border-top-color Sets the color of an element's top borders; default is the color of the element. |
| 16 | border-bottom-color Sets the color of an element's bottom borders; default is the color of the element. |
| 17 | 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. |
| 18 | border-left-width Sets the thickness of an element's left border. |
| 19 | 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. |
| 20 | border-right-width Sets the thickness of an element's right border. |
| 21 | 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. |
| 22 | border-style Sets the style of all four of an element's borders. |
| 23 | 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. |
| 24 | border-top-width Sets the thickness of an element's top border. |
| 25 | border-width Sets the thickness of all four of an element's borders. |
| 26 | bottom Used with the position property to place the bottom edge of an element. |
| 27 | caption-side Sets the position for a table caption. |
| 28 | 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. |
| 29 | clip Sets the clipping mask for an element. |
| 30 | color Sets the color of an element. |
| 31 | content Inserts generated content around an element. |
| 32 | 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. |
| 33 | 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. |
| 34 | cue-after Plays the designated sound after an element is spoken. |
| 35 | cue-before Plays the designated sound before an element is spoken. |
| 36 | cursor Defines shape of the cursor. |
| 37 | direction Defines direction of the flow of an element content. |
| 38 | display Controls how an element is displayed. |
| 39 | elevation Sets the height at which a sound is played. |
| 40 | empty-cells With separate borders, hides empty cells in a table. |
| 41 | float Determines if an element floats to the left or right, allowing text to wrap around it or be displayed inline. |
| 42 | font Sets all the font attributes for an element. Value is any of the values for −
|
| 43 | 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. |
| 44 | font-size Defines the font size. |
| 45 | font-size-adjust Adjusts the current font's aspect ratio. |
| 46 | font-stretch Determines the amount to stretch the current font. |
| 47 | font-style Defines the style of the face, either normal or some type of slanted style. |
| 48 | font-variant Defines a font to be in small caps. |
| 49 | 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. |
| 50 | height Defines the height of an element. |
| 51 | left Used with the position property to place the left edge of an element. |
| 52 | letter-spacing Inserts additional space between text characters. |
| 53 | line-height Sets the distance between adjacent text baselines. |
| 54 | list-style Defines list-related styles using any of the values for −
|
| 55 | list-style-image Defines an image to be used as a list item's marker, in lieu of the value for −
|
| 56 | list-style-position Indents or extends (default) a list item's marker with respect to the item's content. |
| 57 | 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). |
| 58 | margin Defines all four of an element's margins. |
| 59 | margin-bottom Defines the bottom margin of an element. Default value is 0. |
| 60 | margin-left Defines the left margin of an element. Default value is 0. |
| 61 | margin-right Defines the right margin of an element. Default value is 0. |
| 62 | margin-top Defines the top margin of an element. Default value is 0. |
| 63 | 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. |
| 64 | marks The marks property is used to set crop marks and cross marks on paged media. This is used with the @page rule. |
| 65 | max-height max-height property is used to constrain the height of an element. |
| 66 | max-width max-width property is used to set the maximum width of an element. |
| 67 | min-height min-height property is used to constrain the height of an element. |
| 68 | min-width min-width property is used to constrain the width of an element. |
| 69 | orphans Sets the minimum number of lines allowed in an orphaned paragraph fragment. |
| 70 | outline The outline property is a shorthand property to specify all outline properties. |
| 71 | 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. |
| 72 | 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. |
| 73 | 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. |
| 74 | overflow Determines how overflow content is rendered. |
| 75 | padding Defines all four padding amounts around an element. |
| 76 | padding-bottom Defines the bottom padding of an element. Default value is 0. |
| 77 | padding-left Defines the left padding of an element. Default value is 0. |
| 78 | padding-right Defines the right padding of an element. Default value is 0. |
| 79 | padding-top Defines the top padding of an element. Default value is 0. |
| 80 | page Associates a named page layout with an element. |
| 81 | page-break-after Forces or suppresses page breaks after an element. |
| 82 | page-break-before Forces or suppresses page breaks before an element. |
| 83 | page-break-inside Suppresses page breaks within an element. |
| 84 | pause The pause property is CSS shorthand for specifying shorthand property for specifying pauses in aural media. |
| 85 | pause-after Pauses a media after speaking an element. |
| 86 | pause-before Pauses a media before speaking an element. |
| 87 | pitch Sets the average pitch of an element's spoken content. |
| 88 | pitch-range Sets the range of the pitch, from 0 (flat) to 100 (broad); default is 50. |
| 89 | 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. |
| 90 | position Sets the positioning model for an element. |
| 91 | quotes Sets the quote symbols used to quote text. |
| 92 | richness Sets the richness of the voice, from 0 (flat) to 100 (mellifluous); default is 50. |
| 93 | right Used with the position property to place the right edge of an element. |
| 94 | size The size property is used in paged media to specify the size of the page. |
| 95 | speak Determines how an element's content is spoken. |
| 96 | speak-header Determines if table headers are spoken once for each row or column or each time a cell is spoken. |
| 97 | speak-numeral Determines how numerals are spoken. |
| 98 | speak-punctuation Determines if punctuation is spoken or used for inflection. |
| 99 | speech-rate Sets the rate of speech; a number sets the rate in words per minute. |
| 100 | stress Sets the stress of the voice, from 0 (catatonic) to 100 (hyperactive); default is 50. |
| 101 | table-layout Determines the table-rendering algorithm. |
| 102 | text-align Sets the text alignment style for an element. |
| 103 | text-decoration Defines any decoration for the text; values may be combined. |
| 104 | text-indent Defines the indentation of the first line of text in an element; default is 0. |
| 105 | text-shadow Creates text drop shadows of varying colors and offsets. |
| 106 | text-transform Transforms the text in the element accordingly. |
| 107 | top Used with the position property to place the top edge of an element. |
| 108 | vertical-align Sets the vertical positioning of an element. |
| 109 | visibility Determines if an element is visible in the document or table. |
| 110 | voice-family Selects a named voice family to speak an element's content. |
| 111 | volume Sets the volume of spoken content; numeric values range from 0 to 100. |
| 112 | white-space Defines how whitespace within an element is handled. |
| 113 | widows Sets the minimum number of lines allowed in a widowed paragraph fragment. |
| 114 | width Defines the width of an element. |
| 115 | word-spacing Inserts additional space between words. |
| 116 | z-index Sets the rendering layer for the current element. |
Pseudo-classes & Pseudo-elements
| Sr.No. | Property & Description |
|---|---|
| 1 | :active Use this class to add special effect to an activated element. |
| 2 | :focus Use this class to add special effect to an element while the element has focus. |
| 3 | :hover Use this class to add special effect to an element when you mouse over it. |
| 4 | :link Use this class to add special effect to an unvisited link. |
| 5 | :visited Use this class to add special effect to a visited link. |
| 6 | :first-child Use this class to add special effect to an element that is the first child of some other element. |
| 7 | :lang Use this class to specify a language to use in a specified element. |
| 8 | :first-letter Use this element to add special effect to the first letter of a text. |
| 9 | :first-line Use this element to add special effect to the first line of a text. |
| 10 | :before Use this element to insert some content before an element. |
| 11 | :after Use this element to insert some content after an element. |