Cascading Style Sheets
Quick Reference

 

Characters

  font-family Font family name IE3 NN4  
  arial, courier, serif, etc.   {font-family: arial}  
 
  font-size Font size IE3 NN4  
  xx-small, x-small, small, medium, large, x-large,
xx-large, smaller, larger
, <length>, <percentage>
  {font-size: 10pt}  
 
  font-style Font style IE4 NN4  
  normal, italic, oblic   {font-style: italic}  
 
  font-weight Font weight IE4 NN4  
  normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900   {font-weight: bold}  
 
  font-variant Normal or small caps IE4 NN6  
  normal, small-caps   {font-variant: small-caps}  
 
  text-transform Case IE4 NN4  
  none, capitalize, uppercase, lowercase   {text-transform: capitalize}  
 
  text-decoration Decoration IE4 NN4  
  none, underline, overline, line-through, blink   {text-decoration: underline}  
 
  color Color IE3 NN4  
  <color>   {color: blue}  
 


Text Alignment, Indentation, and Spacing

  text-align Horizontal alignment IE4 NN4  
  left, right, center, justify   {text-align: justify}  
 
  vertical-align Vertical alignment IE4 NN4  
  baseline, top, text-top, middle, bottom, text-bottom, sub, super   {vertical-align: top}  
 
  text-indent First line indentation IE4 NN4  
  <length>, <percentage>   {text-indent: 10px}  
 
  line-height Distance between lines IE4 NN4  
  normal, <number>, <length>, <percentage>   {line-height: 150%}  
 
  letter-spacing Space between characters IE4 NN6  
  normal, <length>   {letter-spacing: 1em}  
 
  word-spacing Distance between words IE6 NN6  
  normal, <length>   {word-spacing: 10px}  
 


Margins

  margin-top Top margin IE3 NN4  
  auto, <length>, <percentage>   {margin-top: 10px}  
 
  margin-bottom Bottom margin IE4 NN4  
  auto, <length>, <percentage>   {margin-bottom: 10px}  
 
  margin-left Left margin IE3 NN4  
  auto, <length>, <percentage>   {margin-left: 10px}  
 
  margin-right Right margin IE3 NN4  
  auto, <length>, <percentage>   {margin-right: 10px}  
 


Padding

  padding-top Top padding IE4 NN4  
  <length>, <percentage>   {padding-top: 10px}  
 
  padding-bottom Bottom padding IE4 NN4  
  <length>, <percentage>   {padding-bottom: 10px}  
 
  padding-left Left padding IE4 NN4  
  <length>, <percentage>   {padding-left: 10px}  
 
  padding-right Right padding IE4 NN4  
  <length>, <percentage>   {padding-right: 10px}  
 


Background

  background-position Position relative to the upper-left corner (0,0) IE4 NN6  
  top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right, <x% y%>, <x y>   {background-position: top left}
{background-position: 10% 10%}
{background-position: 20px 30px}
 
 
  background-color Background color IE4 NN4  
  transparent, <color>   {background-color: #0000CC}  
 
  background-image Background image IE4 NN4  
  none, <url>   {background-image: url(marble.gif)}  
 
  background-repeat Repeats the background image from the upper-left corner IE4 NN4  
  repeat, repeat-x, repeat-y, no-repeat   {background-image: url(marble.gif);
background-repeat: no-repeat}
 
 
  background-attachment Background image scrolling IE4 NN6  
  scroll, fixed   {background-image: url(marble.gif);
background-attachment: fixed}
 
 


Borders

  border Border properties IE4 NN4  
  <width> <style> <color>   {border: thick dotted blue}  
 
  border-left Left border properties IE4 NN6  
  <width> <style> <color>   {border-left: thick dotted blue}  
 
  border-rigth Right border properties IE4 NN6  
  <width> <style> <color>   {border-right: thick dotted blue}  
 
  border-top Top border properties IE4 NN6  
  <width> <style> <color>   {border-top: thick dotted blue}  
 
  border-bottom Bottom border properties IE4 NN6  
  <width> <style> <color>   {border-bottom: thick dotted blue}  
 

  border-width Border width IE4 NN4  
  thin, medium, thick, <length>   {border-width: thin} [All borders]
{border-width: thin medium} [Top-bot/left-right]
 
 
  border-left-width Left border width IE4 NN4  
  thin, medium, thick, <length>   {border-left-width: thick}  
 
  border-right-width Right border width IE4 NN4  
  thin, medium, thick, <length>   {border-right-width: 0.1in}  
 
  border-top-width Top border width IE4 NN4  
  thin, medium, thick, <length>   {border-top-width: 0.5px}  
 
  border-bottom-width Bottom border width IE4 NN4  
  thin, medium, thick, <length>   {border-bottom-width: 0.5cm}  
 

  border-color Border color IE4 NN6  
  <color>   {border-color: blue}  
 
  border-left-color Left border color IE4 NN6  
  <color>   {border-left-color: #0000FF}  
 
  border-right-color Right border color IE4 NN6  
  <color>   {border-right-color: rgb(0,0,255)}  
 
  border-top-color Top border color IE4 NN6  
  <color>   {border-top-color: rgb(0%,0%,100%)}  
 
  border-bottom-color Bottom border color IE4 NN6  
  <color>   {border-bottom-color: #0000FF}  
 

  2010 Liberty Boy