CSS 2 Tutorial - Properties and Values

This CSS tutorial describes properties and values contained in Cascading Style Sheets, level 2. CSS 2 is a style sheet language that allows for presentation to be separated from content.

By separating the presentation of documents from the content of documents, CSS 2 simplifies Web document creation and site maintenance.

PROPERTY VALUE DESCRIPTION INHERITED EXAMPLE
font font-style
font-family
font-size/line-height
font-weight
font-variant
caption
small-caption
icon
menu
message-box
status-bar
Used for setting
all the font
properties in
one declaration.
Yes
font: oblique small-caps
900 12px/14px arial

font: menu
TEXT
PROPERTY VALUE DESCRIPTION INHERITED EXAMPLE
letter-
spacing
normal
length
Used to increase
or decrease the
space between
characters.
Yes
letter-
spacing: 3px
word-
spacing
normal
length
Used to increase
or decrease the
space between words. Note:negative
values are
allowed.
Yes
This sentence
use word-spacing:
-4px
This sentence
use word-spacing:
4px
text-
align
left
right
center
justify
Used to align
text in an element.
Yes
text-align:
left;
text-align:
center
line-
height
number
normal
length
Used to set
the distance
between lines.
Yes
The line height
of this s
entence
is set by:
line-
height:
20pt
text-
indent
length
%
Used to indent
the first line
in an element. Note: Negative
values are
allowed
Yes
text-indent:
-6px
text-indent:
6px
LIST
PROPERTY VALUE DESCRIPTION INHERITED EXAMPLE
list-style list-style-type
list-style-position
list-style-image
Used for setting
all of the properties for
a list in one declaration
Yes
  • list-style :
    decimal inside
COLOR
PROPERTY VALUE DESCRIPTION INHERITED EXAMPLE
color color Used for setting
the color of a text.
Yes
color: rgb(254,255,200)
color : #FFFFFF
color : blue
VISIBILITY
PROPERTY VALUE DESCRIPTION INHERITED EXAMPLE
visibility visible
hidden
collapse
Used to set
if an element
should be visible
or invisible.
No
When used in table elements the collapse value removes a row or column, but it does not affect the table layout. The space taken up by the row or column will be available for other content. If this value is used on other elements, it renders as "hidden".

visibility: collapse
visibility: visible
visibility: hidden
BACKGROUND
PROPERTY VALUE DESCRIPTION INHERITED EXAMPLE
background back
ground-
color
back
ground-
image
back
ground-
repeat
back
ground-
attach
ment
back
ground-
position
Used for
setting
all background
properties
in one
declaration
No background:
#FFFFFF
MARGIN
PROPERTY VALUE DESCRIPTION INHERITED EXAMPLE
margin margin-top
margin-right
margin-bottom
margin-left
Used for
setting the
margin properties in
one declaration.
No
div {margin: 2px} all margins will be 2px
div {margin: 5px 5%} top and bottom margin
will be 2px, left and right
margin will be 2% of
the element width.
div {margin: 2px 2% 2px} top margin will be 2px,
left and right margin will be 2% of the element
width, bottom
margin will be 2px.
div {margin: 2px 2% -2px auto} top margin will be
2px, right margin
will be 2% of the total width of the element, bottom margin will
be -2px, left margin
will be set by
the browser
BORDER
PROPERTY VALUE DESCRIPTION INHERITED EXAMPLE
border border-width
border-style
border-color
Used for setting
all of the
properties for
the four
borders in
one declaration.
No
border:
solid #FFFFFF 7pt
PADDING
PROPERTY VALUE DESCRIPTION INHERITED EXAMPLE
padding padding-top
padding-right
padding-bottom
padding-left
Used for setting
all of the
padding properties
in one declaration. Note: Negative
values are
not allowed.
No
div {padding: 1px}
padding will
be 1px on all
four sides of
the div element

div {padding: 1px 1%}
top and bottom
padding will be
1px, left and right padding will be
1% of the width
of the closest element.

div{padding: 1px 1% 1px}
top padding will
be 1px, left and
right padding will be 1% of the width of
the closest
element, bottom
padding will be 1px

div {padding:1px 1% 1px 1px}
top padding will
be 1px, right
padding will be
1% of the width of the closest
element, bottom
padding will
be 1px, left
padding will be 1px
TABLE
PROPERTY VALUE DESCRIPTION INHERITED EXAMPLE
border-collapse collapse
separate
Used for setting
the border
model for a table.
Yes
border-collapse:
separate
table-layout auto
fixed
Used for setting
the table layout.
Yes
table-layout:
fixed
DIMENSION
PROPERTY VALUE DESCRIPTION INHERITED EXAMPLE
width auto
%
length
Used for setting
the width of an element
No
width:
50pxValid CSS
height auto
length %
Used for setting
the height of an element
No
height:
50pxValid CSS
POSITIONING
PROPERTY VALUE DESCRIPTION INHERITED EXAMPLE
position static
relative
absolute
fixed
Used to place an
element in a
static, relative,
absolute or
fixed position.
No

With the value
of absolute
the element
can be placed
anywhere on a page.

This text is in absolute
position 10 percent
from the left:

position:
relative
right : 10%

With the value
of relative an
element moves
relative to
its normal position, so "left : 20"
adds 20 pixels
to the element's
left position:

This text is
in relative
position 20
pixels
from the right:

position:
relative
right : 20px
top auto
length
%
Used to set how
far the top edge
of an element is
above/below
the top edge
of it's parent element.
No
top: 20px
Used to
set
the top
edge of
the
paragraph
20px
below the
top
edge of
the window.

top: -20px
Used to
set the
top edge
of the
paragraph
20px
above the
top
edge of
the window.
left auto
%
length
Used to set how
far the left
edge of an element
is to the right/left
of the left edge
of the parent element.
No
left: 2px
Used to set
the left edge
of the paragraph
2 px to the
right of the
left edge
of the window.

left: -2px
Used to sets
the left
edge of the
paragraph 2px
to the
left of the
left edge of
the window.
z-index auto
number
Sets the stack
order of an element.
An element with
greater stack order
is always in front
of another element
with lower stack order.
Note: Elements can
have negative stack orders.
Note: z-index
only works on elements
that have been
positioned
(e.g. position:absolute;).
No

z-index: -1
z-index 1

With the value of
"auto"The stack
order is equal
to its parents:

z-index :
auto