http://www.tizag.com/cssT/reference.

php

CSS Reference Page

We are constantly updating this page. If you would like to see additional CSS reference items, please
Contact Us with your request.

Green - Safe to use

Yellow - Usually safe, but check out compatibility issues.
Click the link on the left side of the chart to see more information and an example of that property.
Attribute

Values

color
size
percentage
pos-keyterm
url
background repeat
repeat-x
repeat-y
no-repeat
fixed
scroll
fixed

backgroundscroll
attachment

Description

Allows you to set all values of the background in

one declaration. We recommend that you instead
use the specific background-attributes.

Dictate whether your background will scroll or not

when the visitor scrolls the web page up and down.

color

backgroundnone
color

Allows you to set the color of the background.

background- url
image

Use an image as a background. Remember to

choose an image that does not interfere with a
visitor's ability to read your text.

size
percentage
backgroundpos-keyposition
term

Define the position of your background image. You

must define a background-image to use
background-position.

repeat
repeat-x
backgroundrepeat-y
repeat
no-repeat

Dictate if and in which direction your background

image will repeat. Vertically is the x-axis and
horizontally is the y-axis.

border solid

double
groove
dotted
dashed

There are endless types of border styles at your

disposal. We recommend that you experiement with
many color/border-style combinations to get an idea
of all the different looks you can create.

Use?

http://www.tizag.com/cssT/reference.php

inset
outset
ridge
hidden
four-sides
width-keyterm
size
color
borderwidth-keybottom
term

border- color
bottom-color

solid
double
groove
dotted
border- dashed
bottom-style inset
outset
ridge
hidden
size
border- width-keybottom-width term

border-color

color

size
color
border-left width-keyterm

border-left- color
color

border-left- solid
style double

groove
dotted
dashed
inset
outset

Set the bottom border of the element. If you would

like to place a border on only one side of an HTML
element, or maybe have a unique look for each side
of the border, then use border-(direction).
Set the color of the element's bottom border. Note:
You must define a width and style if you want the
border to display. Using border-color by itself will not
draw a border.

Set the bottom border style of the element. Note:

You must define a border width if you want the
border to display. Using border-style by itself will not
draw a border.

Set the width of the element's bottom border. Note:

You must define a style if you want the border to
display. Using border-width by itself will not draw a
border.
Set the color of the element's border. Note: You
must define a width and style if you want the border
to display. Using border-color by itself will not draw a
border.
Set the left border of the element. If you would like
to place a border on only one side of an HTML
element, or maybe have a unique look for each side
of the border, then use border-(direction).
Set the color of the element's left border. Note: You
must define a width and style if you want the border
to display. Using border-color by itself will not draw a
border.
Set the left border style of the element. Note: You
must define a border width if you want the border to
display. Using border-style by itself will not draw a
border.

http://www.tizag.com/cssT/reference.php

ridge
hidden
size
border-left- width-keywidth term

size
color
border-right width-keyterm

border-right- color
color

solid
double
groove
dotted
border-right- dashed
style inset
outset
ridge
hidden
size
border-right- width-keywidth term

solid
double
groove
dotted
dashed
inset
border-style outset
ridge
hidden
four-sides
width-keyterm
size
color
border-top width-keyterm
border-top- color
color

Set the width of the element's left border. Note: You

must define a style if you want the border to display.
Using border-width by itself will not draw a border.
Set the right border of the element. If you would like
to place a border on only one side of an HTML
element, or maybe have a unique look for each side
of the border, then use border-(direction).
Set the color of the element's right border. Note: You
must define a width and style if you want the border
to display. Using border-color by itself will not draw a
border.

Set the right border style of the element. Note: You

must define a border width if you want the border to
display. Using border-style by itself will not draw a
border.

Set the width of the element's right border. Note:

You must define a style if you want the border to
display. Using border-width by itself will not draw a
border.

Set the border style of the element. Note: You must

define a border width if you want the border to
display. Using border-style by itself will not draw a
border.

Set the top border of the element. If you would like

to place a border on only one side of an HTML
element, or maybe have a unique look for each side
of the border, then use border-(direction).
Set the color of the element's top border. Note: You
must define a width and style if you want the border

http://www.tizag.com/cssT/reference.php

to display. Using border-color by itself will not draw a

border.
solid
double
groove
dotted
border-top- dashed
style inset
outset
ridge
hidden
size
border-top- width-keywidth term

size
width-keyborder-width
term
left
right
clear
both

color

color

block
display inline

left
float right

font-family

font-name

percentage
size
font-size fsize-keyterm
font-style italic

oblique

Set the top border style of the element. Note: You

must define a border width if you want the border to
display. Using border-style by itself will not draw a
border.

Set the width of the element's top border. Note: You

must define a style if you want the border to display.
Using border-width by itself will not draw a border.
Set the width of the element's border. Note: You
must define a style if you want the border to display.
Using border-width by itself will not draw a border.
Specify which side may not have a floating element.
If an element is already floating to the chosen side,
then the current item will be displayed on the
following line. Use "both" to clear both left and right.
Define the color of your font.
Control whether or not multiple elements can
appear on one line. A paragraph tag only allows for
one paragraph per line, by default. With CSS you
can make new lines occur after each element
(block) or prevent new lines (inline).
Float an element to the left or right. The content will
wrap around an element that is floated.
Font family's can be divided into two groups: serif
and san serif. A san serif font does not include the
small lines at the end of characters, while a serif
font does include these small lines. When choosing
which kind you prefer, remember that studies have
shown that sans serif fonts are much easier to read
on a computer monitor as opposed to a serif font.
Set the size of your font in a variety of ways. We
recommend that you use percentages for general
content and reserve static values for special cases.
Make your font italic, if it is supported by that font.
This has a similar effect as the italic HTML tag.

http://www.tizag.com/cssT/reference.php

normal

font-variant

small-caps

weight-keyterm
font-weight weightvalue

Convert the font to small capitals. Note: not all fonts

support this kind of style.
Control the thickness of your font. When using
numerical values for font-weight, we suggest
multiples of 100 (e.g. 200, 300, etc) because any
less and you probably will not see any difference.
The values range from 100(thin)-900(thick).

size
height auto

letter-spacing

size

Set the height of an element.

Specify the exact value of the spacing between your
letters. Letter-spacing works best when pixels are
used to define the spacing.

size
line-height percentage

circle
square
disc
upperalpha
lower-alpha
upperroman
list-style
lowerroman
decimal
inside
outside
url
none

list-style- url
image

inside

list-styleoutside
position

list-style-type circle

Sets the height of the lines of text in an element.

Define all attributes of a list element in one

decleration. A useful technique is to define a styletype in addition to a list-image. If an image is not
able to be loaded, then the style-type will be used
as a backup.

Insert an image in place of the normal list styled

bullets. A good choice for a bullet image would one
that is smaller than the height of your text and is a
relatively simple/plain graphic.
Alter the indentation of your bullets or numbering
systems. You may only use keyterms when
specifying the indentation. Note: "outside" is actually
the default setting for list indentation.

Select the style for your list items. Numbering styles

square
should be used with order lists, while shapes are
disc
best saved for unordered lists.
upperalpha
lower-alpha
upperroman

http://www.tizag.com/cssT/reference.php

lowerroman
decimal

size
percentage
margin
auto

size
margin- percentage
bottom auto

size
percentage
margin-left
auto
size
percentage
margin-right
auto
size
percentage
margin-top
auto

size
percentage
padding
four-sides

size

paddingpercentage
bottom

size
padding-left percentage

size
padding-right percentage

size
padding-top percentage

position absolute

relative

Define the margin of an element with this general

attribute. A margin defines the space around an
element's border. We have added borders to the
example so that you may see the changes in the
margin more readily.
It is possible to define individual margins by adding
a direction suffix to the margin general attribute.
Margin-bottom will set the bottom margin for this
element.
It is possible to define individual margins by adding
a direction suffix to the margin general attribute.
Margin-left will set the left margin for this element.
It is possible to define individual margins by adding
a direction suffix to the margin general attribute.
Margin-right will set the right margin for this
element.
It is possible to define individual margins by adding
a direction suffix to the margin general attribute.
Margin-top will set the top margin for this element.
Define the padding of an element with this general
attribute. A padding is the space between an
element's border and the content within it. We have
added borders to the example so that you may see
the effects of padding more readily.
It is possible to define these individual paddings
simply by adding a direction suffix to the padding
attribute. Padding-bottom will set the bottom
padding for this element.
It is possible to define these individual paddings
simply by adding a direction suffix to the padding
attribute. Padding-left will set the left padding for this
element.
It is possible to define these individual paddings
simply by adding a direction suffix to the padding
attribute. Padding-right will set the right padding for
this element.
It is possible to define these individual paddings
simply by adding a direction suffix to the padding
attribute. Padding-top will set the top padding for
this element.
Manipulate the exact position of your HTML
elements. The Top and Left attributes define where

http://www.tizag.com/cssT/reference.php

the object will be placed.

Move Left - Use a negative value for left.
percentage
size

Move Right - Use a positive value for left.

Move Up - Use a negative value for top.
Move Down - Use a positive value for top.

right
center
text-align left
justify
linethrough
text- overline
decoration underline
none
size
text-indent percentage

capitalize
text- lowercase
transform uppercase

verticalvertical-align values

white-space

nowrap

size
percentage
width
auto

word-spacing

size

z-index whole-

number

Manipulate the alignment of your text.

Manipulate the text's decoration. Note: to specify no

text decoration, be sure that you use "none". Anchor
underlines can be removed with that method.

Indent the first line of an element. This is most

useful for indentation on paragraphs.
Modify the capitalization of your text with texttransform. Note: When someone copies and pastes
text from your web site with CSS altered
capitalization, they will paste the original, unaltered
text that appears in your HTML code.
Sets the vertical alignment of your element, most
often text. Vertical-align aligns the content that
appears in an imaginary line. Examples of these
lines are along a line of text or within a <td> of a
table.
Prevent your text from wrapping with nowrap. A new
line will not be started unless you explicitly tell the
browser to with <br/>. Note: we have defined the
overflow and width CSS attributes, so that you may
see nowrap in action.

Set the width of an element.

Specify the exact value of the spacing between your

words. Word-spacing works best when pixels are
used as the spacing value.
Set the z-index of an HTML element. The HTML
element with the largest z-index will appear on top

http://www.tizag.com/cssT/reference.php

of those with a smaller z-index. z-index is useful for

when using positioning and for resolving positioning
conflicts.