There are four methods in which Styles can be used. The first three are either called or coded in the Header.

1. Embedding: This places the style formatting inside the header of the HTML document.
2. Importing: This uses a separate file, FileName.css.
3. Linking: This uses a separate file, FileName.css.
4. InLine: This places the style formatting inside of an individual tag. <br style='text-align: center';>

Here are the formats for all four.

1. EMBEDDING:
   <style type="text/css" media="print">
<!--
p {text-align: right; margin-bottom: 4pt;}
-->
</style>
2. IMPORTING:
   <style>
<!--
@import url('YourFileName.css');
-->
</style>
3. LINKING:
   <link rel="stylesheet" type="text/css" media="screen" href="ScreenFileName.css">
<link rel="stylesheet" type="text/css" media="print" href="PrintFileName.css">
4. INLINE: (Used as a property in a tag. See list at bottom. Must use quotes, ” or ‘, around the style command.)
   Example: used in a <p> tag
   <p style="text-align: right; margin-bottom: 4pt";>
   Example: used in a <span> tag
   <span style="font-family: Verdana, "Times New Roman"; font-weight: 700";>Some Text</span>

EXAMPLE OF AN EXTERNAL STYLE SHEET FileName.css. This file only contains the style code from one line to many.

a:hover {font-size: 100%; font-weight: bold; color: #ff0000;}
a:link {color: #0000ff;}
a:visited {color: #0000ff;}
a:active {color: #ff0000;}

STYLES LIST

Notice that ALL style properties are terminated using a semi-colon. Do this whether using one style property or ten.
Properties marked with an * are using shorthand values.

FONT:

* font: [style weight variant size/line-height family] (Size & Family are required)
font-style: [normal, italic, oblique]
font-weight: [100 (lightest), 400 (normal), 700 (bold), 900 (extra-bold)]
font-variant: [small-caps] (Not very supported)
font-size: [12pt, 120%, 1.2em]
line-height: [normal, 14pt, 120%, 2.0]
font-family: Verdana, “Times New Roman”, Arial, etc.

TEXT:

letter-spacing: [2px]
text-align: [left, right, center, justify]
text-decoration: [underline, overline, line-through, blink]
text-indent: [-3em, 3em] Example of HANGING: p {text-indent: -3em; margin-left: 3em}
text-transform: [capitalize, uppercase, lowercase, none]
vertical-align: [baseline, middle, sub, super, text-top, text-bottom, top, bottom or 50%, -100%]
word-spacing: [25px]

COLOR & BACKGROUND:

* background: [color image position repeat attachment]
background-attachment: [scroll, fixed]
background-color: [blue, #0000ff]
background-image: [none or a url(image.gif)]
background-position: [10px (Right) 20px (Down)]
backgroung-repeat: [repeat, repeat-x, repeat-y, no-repeat]
color: [red or #ff0000] (Font Color)

BOX PROPERTIES:

* margin: [top right bottom left] (1 value = 4 sides, 2 values = T/B & L/R, 3 values = T & L/R & B)
* border: [width color style]
* padding: [top right bottom left] (1 value = 4 sides, 2 values = T/B & L/R, 3 values = T & L/R & B)

Margin, Border, and Padding shorthand values can all be used with the longhand properties. eg: margin-left, border-right, etc.

margin-left, margin-right, margin-top, margin-bottom:
border-left, border-right, border-top, border-bottom:
padding-left, padding-right, padding-top, padding-bottom:
border-color: [green or #00ff00]
border-width: [thin, medium, thick or 1px, 5px, etc.]
border-style: [none, dotted, dashed, solid, double, groove, ridge, inset, outset]
position: [absolute, relative]

LIST:

list-style-image: [none, url(image.gif)]
list-style-position: [inside, outside]
list-style-type: [disc, circle, square, none, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha]

OTHER:

white-space: [normal, pre]
float: [none, left, right]
clear: [none, left, right, both]

MOUSEOVER STUFF:

<a href=”www.somelink.com” OnMouseOver=’rollover.src=”image1.gif”‘ OnMouseOut=’rollover.src=”image2.gif”‘>
<img src=”image2.gif” name=”rollover”></A>

IMAGE MAPPING:

<img src=”someimage.jpg” usemap=#MAPNAME>
At end of doc if desired…
<map name=”MAPNAME”>
<area shape=”rect” [circle, poly] coords=”X,Y,X,Y,” href=”url.com”>
<area shape=”rect” [circle, poly] coords=”X,Y,X,Y,” href=”another_url.com”>
</map>

Notes on Coords:

Rect first X,Y is upper left, second X,Y is lower right.
Circle first X,Y is center of circle, second X,Y is far right hand edge of radius.
Poly uses from 3 to as many points as you would like to use. X,Y for each point.

CLASSIFACTION PROPERTIES:

display [block, inline, list-item, none, compact, run-in, marker]

Preformatted plain text. Good for code