Web Design Schools - Style Sheet Reference

Style Sheet Reference
Cascading Style Sheets are the modern way to add formatting to your HTML documents. Style sheets are perfered because you can quickly change the look of your web pages without editing alot of code.

More CSS Tips Below

Style	Example Usage & Options
background-color	body { background-color: #FF0000; }
background-image	body { background-image: url("images/bg.gif"); }
background-repeat	body { background-image: url("images/bg.gif"); background-repeat: repeat-x; } options: repeat \| no-repeat \| repeat-x \| repeat-y
background-attachment	body { background-image: url("images/bg.gif"); background-attachment: fixed; } This prevents the background from scrolling with the page.
background-position	td { background-image: url("images/bg.gif"); background-position: top left; } options: top \| center \| bottom \| left\| right
border-color	table { border-color: #FF0000; }
border-style	table { border-style: dotted; } options: none \| dotted \| dashed \| solid \| double \| groove \| ridge \| inset \| outset
border-width	table { border-width: thick; } options: thin \| medium \| thick \| none
border border-top border-bottom border-left border-right	table { border: 1px dotted #555555; } .t2 { border-bottom: thick solid #FF0000; }
clear	.myimg { clear: right; } options: none \| left \| right Prevents text from flowing around an element.
color	td { color: #FF0000; }
float	.myimg { float: right; } options: none \| left \| right Allows text to flow around an element.
font-family	p { font-family: arial, verdana; }
font-size	p { font-size: 120%; } example options: 110% \| 12pt \| 12px \| 12em \| xx-small \| x-small \| small \| medium \| large \| x-large \| xx-large
font-style	p { font-style: italic; } options: normal \| italic \| oblique
font-variant	p { font-variant: small-caps; } options: normal \| small-caps This is written in small caps.
font-weight	p { font-weight: bold; } options: lighter \| normal \| bold \| bolder
height	.myimg { height: 70px; }
letter-spacing	p { letter-spacing: 10px; } Sets the space between letters.
line-height	p { line-height: center; } Sets the distance between lines of text.
list-style-image	ul {list-style-image: url(bullet.gif); }
list-style-position	ul { list-style-position: outside; } Control the indent of lists.
list-style-type	ul { list-style-type: circle; } options: disc \| circle \| square \| decimal \| lower-roman \| upper-roman \| lower-alpha \| upper \| alpha
margin-top margin-bottom margin-left margin-right	.mytext { margin-top: 5px; }
padding-top padding-bottom padding-left padding-right	table { padding-top: 5px; }
text-align	h1 { text-align: center; } options: left \| right \| center \| justify
text-decoration	p { text-decoration: underine; } options: none \| underline \| overline \| line-through
text-indent	p { text-indent: 10px; }
text-transform	p { text-transform: lowercase; } options: none \| capitalize \| uppercase \| lowercase Sets the case of the text.
vertical-align	.myimg { vertical-align: middle; } options: baseline \| sub \| super \| top \| text-top \| middle \| bottom \| text-bottom Aligns the element vertically to the baseline.
width	.myimg { width: 70px; }
white-space	p { white-space: no-wrap; } options: normal \| pre \| no-wrap Controls how text wraps.
word-spacing	p { word-spacing: 2pt } Sets the space between words.

Referencing an External Style Sheet :
Add the reference to your css file in the head of your html file.
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="my_style.css">
  </head>...

Inline Style Sheet :
<html>
  <head>
  <style>
    b { background-color: #FFFFFF; }
  </style>
  </head>...

Using Style:

<span class="myclass">Use span tags to format text</span>

<div class="myclass">Use div tags about blocks of html code.</div>

Size Units:
  em - The height of the element's font.
  pt - Points (1/72 inch)
  px - Pixels
  % - Percent
  Less commonly used units include: in, cm, mm, pc

Color Units:
  #RGB - Exmample: #F00
  #RRGGBB - Exmample: #FF0000
  rgb(x,x,x) - Example: rgb(255, 0, 0)
  R%,G%,B%) - Example: rgb(100%, 0%, 0%)
  (color) - Example: red

An Example Style Sheet

body   /* here we define with the entire page looks like */
{
   background-color: #FFFFFF;
   font-family: verdana, arial;
}

b   /* all bold tags will look like this */
{
   color: #000099;
   font-size: 120%;
}

td.shaded   /* all td tags with class=shaded will have a background color of light grey */
{
   background-color: #EEEEEE;
}

.error   /* all text inside <span class=error> </span> will be red and yellow */
{
   color: red;
   background-color: yellow;
}

#myid   /* the item with <span id=myid> </span> will be green */
{    color: green;
}

a:link, a:active, a:visited    /* all these types of links will be blue*/
{
   color: blue;
}

a:hover   /*the links will be green on mouse over*/
{
   color: green;
}