This is a quick 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
We include each property's possible values, defined as either an explicit keyword or as one of these values:
Property | Possible Values | Description |
azimuth |
- angle
- left-side
- far-left
- left
- center-left
- center
- center-right
- right
- far-right
- right-side
|
Describes the position of a sound source along the horizontal axis of the listener's environment.
|
background |
Values from composite properties.
|
Composite property for the following properties:
- background-attachment
- background-color
- background-image
- background-position
- background-repeat
|
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 |
- percent
- none
- length
- top
- center
- bottom
- left
- right
|
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 |
- repeat
- repeat-x
- repeat-y
- no-repeat
|
Determines how the background image is repeated (tiled) across an element
|
border |
See Description
|
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 |
See Description
|
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 |
See description
|
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 |
See description
|
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 |
See description
|
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 |
- dashed
- dotted
- double
- groove
- inset
- none
- outset
- ridge
- solid
|
Sets the style of all four of an element's borders
|
border-top |
See description
|
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 |
See description
|
Inserts generated content around an element.
|
counter-increment |
See description
|
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 |
See description
|
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 |
- url
- auto
- crosshair
- default
- active
- pointer
- move
- e-resize
- ne-resize
- nw-resize
- n-resize
- se-resize
- sw-resize
- s-resize
- w-resize
- text
- wait
- help
- progress
|
Defines shap of the cursor
|
direction |
|
Defines direction of the flow of an element content
|
display |
- block
- inline
- list-items
- marker
- none
|
Controls how an element is displayed
|
elevation |
- angle
- below
- level
- above
- higher
- lower
|
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 |
See description
|
Sets all the font attributes for an element. Value is any of the values for:
- font-style
- font-variant
- font-weight
- font-size
- line-height
- font-family
|
font-family |
List of font names
|
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 |
- xx-small
- x-small
- small
- medium
- large
- xlarge
- xx-large
- larger
- smaller
- length
- percent
|
Defines the font size
|
font-size-adjust |
|
Adjusts the current font's aspect ratio
|
font-stretch |
- wider
- normal
- narrower
- ultracondensed
- extracondensed
- condensed
- semi-condensed
- semiexpanded
- expanded
- extra-ex
|
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 |
- normal
- bold
- bolder
- lighter
- number
|
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 |
- length
- number
- normal
- percent
|
Sets the distance between adjacent text baselines
|
list-style |
See description
|
Defines list-related styles using any of the values for:
- list-style-image
- liststyle-position
- list-style-type
|
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 |
- circle
- disc
- square
- decimal
- lower-alpha
- lower-roman
- none
- upper-alpha
- upperroman
|
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 |
See the description
|
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 |
- none
- hidden
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
|
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 |
- thin
- medium
- thick
- length (i.e. 1px)
- inherit
|
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 |
- auto
- hidden
- scroll
- visible
|
Determines how overflow content is rendered
|
padding |
See description
|
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 |
- auto
- always
- avoid
- left
- right
|
Forces or suppresses page breaks after an element.
|
page-break-before |
- auto
- always
- avoid
- left
- right
|
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 |
- frequency
- x-low
- low
- medium
- high
- x-high
|
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 |
- absolute
- fixed
- relative
- static
|
Sets the positioning model for an element
|
quotes |
List of strings
|
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 |
- auto
- length
- portrait
- landscape
- inherit
|
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 |
- number
- x-slow
- slow
- medium
- fast
- x-fast
- faster
- slower
|
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 |
- center
- justify
- left
- right
|
Sets the text alignment style for an element
|
text-decoration |
- blink
- line-through
- none
- overline
- underline
|
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 |
See description
|
Creates text drop shadows of varying colors and offsets
|
text-transform |
- capitalize
- lowercase
- none
- uppercase
|
Transforms the text in the element accordingly
|
top |
|
Used with the position property to place the top edge of an element.
|
vertical-align |
- percent
- baseline
- bottom
- middle
- sub
- super
- text-bottom
- text-top
- top
|
Sets the vertical positioning of an element
|
visibility |
|
Determines if an element is visible in the document or table
|
voice-family |
List of voices
|
Selects a named voice family to speak an element's content
|
volume |
- number
- percent
- silent
- x-soft
- soft
- medium
- loud
- x-loud
|
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.
|