CSS Properties

Anatomy of a CSS rule

A CSS rule is made up to two parts: the selector, which states which
tag (element) the rule selects, and the declaration, which states what
happens when the rule is applied.

property value

p { color: red; }

The selector

The declaration

In the tables the following conventions are used:

 Rows shown in blue are shorthand rules that combine several

properties into a single declaration.

 Values shown in blue are the actual values that can appear as
property values for the specified property.

 Values shown in italics and black are representative of a type of

value that can be specified for the specified property.

1
background
Property Description Values
background-color
Shorthand property for
background-image
setting all background
background background-repeat
properties in one
background-attachment
declaration.
background-position
Sets whether a
background image is fixed scroll
background-attachment
or scrolls with the rest of fixed
the page.
color-rgb
Sets the background color color-hex
background-color
of an element. color-name
transparent
Sets an image as the url
background-image
background none
top left
top center
top right
center left
center center
Sets the starting position
background-position center right
of a background image
bottom left
bottom center
bottom right
x% y%
xpos ypos
repeat
Sets if/how a background repeat-x
background-repeat
image will be repeated repeat-y
no-repeat

2
border
Property Description Values
Shorthand property for
border-width
setting all the properties
border border-style
for the four borders in one
border-color
declaration
A shorthand property for
border-bottom-width
setting all the properties
border-bottom border-style
for the bottom border in
border-color
one declaration
Sets the color of the
border-bottom-color border-color
bottom border
Sets the style of the
border-bottom-style border-style
bottom border
thin
Sets the width of the medium
border-bottom-width
bottom border thick
length
Sets the color of the four
border-color borders, can have between color
1 and 4 colors specified
A shorthand property for
border-left-width
setting all the properties
border-left border-left-style
of the left border in one
border-left-color
declaration.
Sets the color of the left
border-left-color border-color
border
Sets the style of the left
border-left-style border-style
border
thin
Sets the width of the left medium
border-left-width
border thick
length
A shorthand property for
border-right-width
setting all the properties
border-right border-right-style
of the right border in one
border-right-color
declaration.
Sets the color of the right
border-right-color border-color
border
Sets the style of the right
border-right-style border-style
border
thin
Sets the width of the right medium
border-right-width
border thick
length

3
border (continued)
Property Description Values
none
hidden
dotted
A shorthand property for
dashed
setting the style for all
solid
border-style four borders in one
double
declaration. Can have
groove
from 1 to 4 styles. ridge
inset
outset
A shorthand property for
border-top-width
setting all the properties
border-top border-top-style
of the top border in one
border-top-color
declaration.
Sets the color of the top
border-top-color border-color
border
Sets the style of the top
border-top-style border-style
border
thin
Sets the width of the top medium
border-top-width
border thick
length
A shorthand property for
thin
setting the width of all
medium
border-width four borders in one
thick
declaration. Can have
length
from 1 to 4 values.

4
classification
Property Description Values
Sets the sides of an left
element where other right
clear
floating elements are not both
allowed none
url
auto
crosshair
default
pointer
move
e-resize
ne-resize
Specifies the type of
cursor nw-resize
cursor to be displayed.
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
none
inline
block
list-item
run-in
compact
marker
table
Sets how/if an element is
display inline-table
displayed
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption
Sets where an image or left
float text will appear in another right
element. none

5
classification (continued)
Property Description Values
static
Places an element in a
relative
position static, relative, absolute,
absolute
or fixed position.
fixed
visible
Sets if an element should
visibility hidden
be visible or invisible
collapse

dimension
Property Description Values
auto
Sets the height of an
height length
element
%
normal
Sets the distance between number
line-height
lines. length
%
none
Sets the maximum height
max-height length
of an element
%
none
Sets the maximum width
max-width length
of an element.
%
Sets the minimum height length
min-height
of an element. %
Sets the minimum width length
min-width
of an element. %
auto
Sets the width of an
width length
element.
%

6
font
Property Description Values
font-style
font-variant
font-weight
font-size/line-height
A shorthand property for
font-family
setting all of the
font caption
properties for a font in one
icon
declaration
menu
message-box
small-caption
status-bar
A prioritized list of font
family names and/or family-name
font-family
generic family names for generic-family
an element
xx-small
x-small
small
medium
large
font-size Sets the size of a font. x-large
xx-large
smaller
larger
length
%
Specifies an aspect value
for an element that will none
font-size-adjust
preserve the x-height of number
the first-choice font.
normal
wider
narrower
ultra-condensed
extra-condensed
Condenses or expands the
font-stretch condensed
current font-family
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded

7
font (continued)
Property Description Values
normal
font-style Sets the style of the font italic
oblique
Displays text in a small- normal
font-variant
caps font or a normal font. small-caps
normal
bold
bolder
lighter
100
200
font-weight Sets the weight of a font. 300
400
500
600
700
800
900

8
generated content
Property Description Values
string
url
counter(name)
counter(name, list-style-
type)
Generates content in a
counters(name,string)
document. Used with the
content counter(name,string,list-
:before and :after pseudo-
style-type)
elements.
attr(X)
open-quote
close-quote
no-open-quote
no-close-quote
Sets how much the
counter increments on none
counter-increment
each occurrence of a identifier-number
selector.
Sets the value the counter
none
counter-reset is set to on each
identifier-number
occurrence of a selector
Sets the type of quotation none
quotes
marks string string

9
list and marker
Property Description Values
A shorthand property for
list-style-type
setting all of the
list list-style-position
properties for a list in one
list-style-image
declaration
Sets an image as the list- none
list-style-image
item marker url
Sets where the list-item
inside
list-style-position marker is placed in the
outside
list.
none
disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-alpha
upper-alpha
Sets the type of the list- lower-greek
list-style-type
item marker. upper-greek
lower-latin
upper-latin
Hebrew
Armenian
Georgian
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha
Sets the offset of the list auto
marker-offset
marker. length

10
margin
Property Description Values
A shorthand property for margin-top
setting all of the margin-right
margin
properties for a margin in margin-bottom
one declaration margin-left
auto
Sets the bottom margin of
margin-bottom length
an element.
%
auto
Sets the left margin of an
margin-left length
element.
%
auto
Sets the right margin of an
margin-right length
element.
%
auto
Sets the top margin of an
margin-top length
element.
%

outlines
Property Description Values
A shorthand property for
outline-color
setting all of the outline
outline outline-style
properties in one
outline-width
declaration
Sets the color of the color
outline-color
outline around an element. invert
none
dotted
dashed
solid
Sets the style of the
outline-style double
outline around an element.
groove
ridge
inset
outset
thin
medium
Sets the width of the
outline-width thick
outline around an element.
length
%

11
padding
Property Description Values
A shorthand property for padding-top
setting all of the padding padding-right
padding
properties in one padding-bottom
declaration padding-left
Sets the bottom padding length
padding-bottom
of an element. %
Sets the left padding of an length
padding-left
element. %
Sets the right padding of length
padding-right
an element. %
Sets the top padding of an length
padding-top
element. %

12
positioning
Property Description Values
Sets how far the bottom
edge of an element is auto
bottom above/below the bottom %
edge of the parent length
element.
Sets the shape of an
element. The element is shape
clip
clipped into this shape, auto
and displayed.
Sets how far the left edge
auto
of an element is to the
left %
right/left of the left edge
length
of the parent element.
visible
Sets what happens if the
hidden
overflow content of an element
scroll
overflows its area.
auto
static
Places an element in a
relative
position static, relative, absolute,
absolute
or fixed position
fixed
Sets how far the right
edge of an element is to auto
right the left/right of the right %
edge of the parent length
element.
Sets how far the top edge
auto
of an element is
top %
above/below the top edge
length
of the parent element.
baseline
sub
super
top
Sets the vertical alignment text-top
vertical-align
of an element. middle
bottom
text-bottom
length
%
Sets the stack order of an auto
z-index
element. number

13
table
Property Description Values
Sets whether the table
borders are collapsed into
collapse
border-collapse a single border or
separate
detached as in standard
HTML.
Sets the distance that
separates cell borders
border-spacing (only applies to the length length
“separated borders”
model).
top
Sets the position of the bottom
caption-side
table caption left
right
Sets whether or not to
show empty cells in a
show
empty-cells table (only applies to the
hide
“separated borders”
model).
Sets the algorithm used to
auto
table-layout display the table cells,
fixed
rows, and columns.

14
text
Property Description Values
color Sets the color of a text. color
ltr
direction Sets the text direction
rtl
normal
Sets the distance between number
line-height
the lines of text. length
%
Increases or decreases the normal
letter-spacing
space between characters. length
left
Aligns the text in an right
text-align
element. center
justify
none
underline
text-decoration Adds decoration to text. overline
line-through
blink
Indents the first line of length
text-indent
text in an element. %
none
text-shadow Sets text shadowing. color
length
none
Controls the letters in an capitalize
text-transform
element. uppercase
lowercase
normal
unicode-bidi embed
bidi-override
Sets how white space normal
white-space inside an element is pre
handled. nowrap
Increase or decrease the normal
word-spacing
space between words. length

15
pseudo-classes
Pseudo-class Description
:active Adds special style to an activated element.

:focus Adds special style to an element while the element has focus.

:hover Adds special style to an element when you mouse over it.

:link Adds special style to an unvisited link.

:visited Adds special style to a visited link.

Adds special style to an element that is the first child of some
:first-child
other element.
Allows the author to specify a language to be used in a
:lang
specified element.

pseudo-elements
Pseudo-element Description
:first-letter Adds special style to the first letter of a text.

:first-line Adds special style to the first line of a text.

:before Inserts some content before an element.

:after Inserts some content after an element.

16
media types
Media Type Description
all Used for all media type devices.

aural Used for speech and sound synthesizers.

braille Used for Braille tactile feedback devices,

embossed Used for paged Braille printers.

handheld Used for small or handheld devices.

print Used for printers.

projection Used for projected presentations, like slides.

screen Used for computer screens.

Used for media using a fixed-pitch character grid like
tty
teletypes and terminals.
tv Used for television-type devices.

17