Print this Section

  
  

CSS Reference Sheet

caption-side
clear
float
vertical-align
background-attachment
background-color
background-image
background-position
background-repeat
border
border-color
border-style
border-width
border-collapse
font
font-family
font-size
font-style
font-variant
font-weight
a:link
a:hover
a:active
a:visited
list-style-image
list-style-position
list-style-type
position
left
top
z-index
height
width
margin
padding
color
letter-spacing
line-height
text-align
text-decoration
text-indent
text-transform
word-spacing

Styles are applied to XHTML elements in the embedded format,

  <style type="text/css">
    selector {property:value [; property:value]...}
  </style>

where the selector can be:

simple selector h1 {property:value [; property:value]...}
multiple selectors h1, h2, h3 {property:value [; property:value]...}
id selector span#id {property:value [; property:value]...}
contextual selector ol li {property:value [; property:value]...}
class selector .name {property:value [; property:value]...}

Styles can also be applied in the in-line format,

  <tag style="property:value [; property:value]...">

CSS Property Value Description
 

Align

caption-side top
bottom
Positions a table caption above or below a table.
clear both
left
right
none
Sets whether the element is positioned in-line with a floating element or is positioned at the next clear line of the document.
float left
right
none
Sets whether the element floats to permit wrapping of accompanying content.
vertical-align bottom
top
baseline
middle
sub
super
text-bottom
text-top
Sets the vertical alignment of the contents of the element.
Top 
 

Background

background-attachment fixed
scroll
Sets how a background image is attached to the document.
background-color colorname
#hexvalue
rgb(r g b)
rgb(r% g% b%)
Sets the color of the background for the element.
background-image url(url)
none
Sets the background image for an element.
background-position left% top%
left top
left|center|right top|center|bottom
Sets the location of the left and top edges of the background image for an element as percentages or measurements. Can use a pair of keywords separated by a space.
background-repeat no-repeat
repeat
repeat-x
repeat-y
Sets whether the background image repeats horizontally, vertically, in both directions, or not at all.
Top 
 

Border

border
style width color Sets the border style, width, and color with a single property.
border-color
border-top-color
border-right-color
border-bottom-color
border-left-color
colorname
#hexvalue
rgb(r g b)
rgb(r% g% b%)
Sets the color of all borders or a single border edge of an element.
border-style
border-top-style
border-right-style
border-bottom-style
border-right-style
dashed
dotted
double
groove
inset
none
outset
ridge
solid
Sets the style of all borders or a single border edge of an element.
border-width
border-top-width
border-right-width
border-bottom-width
border-right-width
thin
medium
thick
width
Sets the width of all borders or a single border edge of an element using a keyword or a width measurement.
border-collapse collapse
separate
Sets whether adjacent table cells are rendered separately or merged into a single border.
Top 
 

Font

font style variant weight size family Sets multiple font properties, separated by spaces, in the exact order shown. Not all properties need to be set.
font-family name [,name]...
serif
sans-serif
cursive
fantasy
monospace
Sets one or more font names or generic name for the element's text.
font-size npx
n%
xx-small
x-small
small
medium
large
x-large
xx-large
Sets the font size for the element's text.
font-style normal
italic
oblique
Sets the font style for the element's text.
font-variant normal
small-caps
Sets the font variant for the element's text.
font-weight normal
bold
bolder
lighter
100 - 900
Sets the font weight for the element's text.
Top 
 
a:link
a:hover
a:active
a:visited
Any text stylings. Sets how a text links responds to mouse activation.
Top 
 

List

list-style-image none
url(url)
Sets the image used as the bullet character for list items.
list-style-position inside
outside
Sets the alignment of wrapped text for a list item. Inside aligns wrapped text with the item marker; outside aligns wrapped text with the beginning text position.
list-style-type circle
disc
square

decimal
lower-alpha
lower-roman
upper-alpha
upper-roman
Sets the list item marker for unordered lists and for ordered lists.
Top 
 

Position

position relative
fixed
Sets the element's location in the document. Fixed positioning is relative to the top-left corner (0,0 pixel position) of the container element.
left npx
n%
Sets the distance of a element from the left margin of its container.
top npx
n%
Sets the distance of a element from the top margin of its container.
z-index n Sets the layer of a element. Elements with smaller numeric values appear below elements with larger values. Zero (0) is the text layer.
Top 
 

Size

height auto
npx
n%
Sets the height of an element.
width npx
n%
auto
Sets the width of the element.
Top 
 

Spacing

margin
margin-top
margin-right
margin-bottom
margin-left
auto
npx
n%
Sets the amount of space that extends beyond the edges of an element.
padding
padding-top
padding-right
padding-bottom
padding-left
auto
npx
n%
Sets the amount of space surrounding the contents of an element.
Top 
 

Text

color colorname
#hexvalue
rgb(r g b)
rgb(r% g% b%
Sets the text color of the element.
letter-spacing normal
npx
auto
Sets the horizontal letter spacing of an element's text. Measurement can be negative.
line-height normal
n
npx
n%
Sets the line height of an element's text. A number serves as a multiplier of the current font size; a measurement is an actual height value; a percentage is a multiplier of the current font size.
text-align left
center
right
justify
Sets the horizontal alignment of text within an element.
text-decoration none
blink
line-through
overline
underline
Sets the decoration of text within an element.
text-indent npx
n%
Sets the indention of text within an element.
text-transform none
captialize
lowercase
uppercase
Sets the capitalization of text within an element.
word-spacing npx
normal
Sets the amount of spacing between words of the element.
Top 

TOP | NEXT: HTML Special Characters