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:
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 shape 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. |
No comments:
Post a Comment