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.

AttributeValuesDescriptionUse?
backgroundcolor
size
percentage
pos-key-term
url
repeat
repeat-x
repeat-y
no-repeat
fixed
scroll

Allows you to set all values of the background in one declaration. We recommend that you instead use the specific background-attributes.
background-attachmentfixed
scroll

Dictate whether your background will scroll or not when the visitor scrolls the web page up and down.
background-colorcolor
none

Allows you to set the color of the background.
background-imageurl

Use an image as a background. Remember to choose an image that does not interfere with a visitor's ability to read your text.
background-positionsize
percentage
pos-key-term

Define the position of your background image. You must define a background-image to use background-position.
background-repeatrepeat
repeat-x
repeat-y
no-repeat

Dictate if and in which direction your background image will repeat. Vertically is the x-axis and horizontally is the y-axis.
bordersolid
double
groove
dotted
dashed
inset
outset
ridge
hidden
four-sides
width-key-term

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.
border-bottomsize
color
width-key-term

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).
border-bottom-colorcolor

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.
border-bottom-stylesolid
double
groove
dotted
dashed
inset
outset
ridge
hidden

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.
border-bottom-widthsize
width-key-term

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.
border-colorcolor

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.
border-leftsize
color
width-key-term

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).
border-left-colorcolor

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.
border-left-stylesolid
double
groove
dotted
dashed
inset
outset
ridge
hidden

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.
border-left-widthsize
width-key-term

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.
border-rightsize
color
width-key-term

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).
border-right-colorcolor

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.
border-right-stylesolid
double
groove
dotted
dashed
inset
outset
ridge
hidden

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.
border-right-widthsize
width-key-term

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.
border-stylesolid
double
groove
dotted
dashed
inset
outset
ridge
hidden
four-sides
width-key-term

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.
border-topsize
color
width-key-term

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).
border-top-colorcolor

Set the color of the element's top 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.
border-top-stylesolid
double
groove
dotted
dashed
inset
outset
ridge
hidden

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.
border-top-widthsize
width-key-term

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.
border-widthsize
width-key-term

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.
clearleft
right
both

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.
colorcolor

Define the color of your font.
displayblock
inline

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).
floatleft
right

Float an element to the left or right. The content will wrap around an element that is floated.
font-familyfont-name

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.
font-sizepercentage
size
fsize-key-term

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.
font-styleitalic
oblique
normal

Make your font italic, if it is supported by that font. This has a similar effect as the italic HTML tag.
font-variantsmall-caps

Convert the font to small capitals. Note: not all fonts support this kind of style.
font-weightweight-key-term
weight-value

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).
heightsize
auto

Set the height of an element.
letter-spacingsize

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

Sets the height of the lines of text in an element.
list-stylecircle
square
disc
upper-alpha
lower-alpha
upper-roman
lower-roman
decimal
inside
outside
url
none

Define all attributes of a list element in one decleration. A useful technique is to define a style-type 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.
list-style-imageurl

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.
list-style-positioninside
outside

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.
list-style-typecircle
square
disc
upper-alpha
lower-alpha
upper-roman
lower-roman
decimal

Select the style for your list items. Numbering styles should be used with order lists, while shapes are best saved for unordered lists.
marginsize
percentage
auto

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.
margin-bottomsize
percentage
auto

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.
margin-leftsize
percentage
auto

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.
margin-rightsize
percentage
auto

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.
margin-topsize
percentage
auto

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.
paddingsize
percentage
four-sides

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.
padding-bottomsize
percentage

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.
padding-leftsize
percentage

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.
padding-rightsize
percentage

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.
padding-topsize
percentage

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.
positionabsolute
relative
percentage
size

Manipulate the exact position of your HTML elements. The Top and Left attributes define where the object will be placed.
  • Move Left - Use a negative value for left.
  • Move Right - Use a positive value for left.
  • Move Up - Use a negative value for top.
  • Move Down - Use a positive value for top.
text-alignright
center
left
justify

Manipulate the alignment of your text.
text-decorationline-through
overline
underline
none

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.
text-indentsize
percentage

Indent the first line of an element. This is most useful for indentation on paragraphs.
text-transformcapitalize
lowercase
uppercase

Modify the capitalization of your text with text-transform. 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.
vertical-alignvertical-values

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.
white-spacenowrap

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.
widthsize
percentage
auto

Set the width of an element.
word-spacingsize

Specify the exact value of the spacing between your words. Word-spacing works best when pixels are used as the spacing value.
z-indexwhole-number

Set the z-index of an HTML element. The HTML element with the largest z-index will appear on top of those with a smaller z-index. z-index is useful for when using positioning and for resolving positioning conflicts.