A Crash Course in STYLE

Style sheets help you control how your web page looks You can control style at three different levels:

1. STYLE in a Tag

I can put a dashed line around this Google link by adding a style attribute to the <A> tag:
<A HREF="www.google.com" STYLE="border:thin dashed black">Google</A>

The format is simple: the property I want to set ("border") followed by a colon (":") and the values I want to set for that property, seperated by spaces ("thin", "dashed" and "black".) Almost all HTML tags can have style properties set like this.

I can set more than one property by seperating them with a semicolon (";"):
STYLE="border:thin dashed black;text-decoration:line-through"
adds a "line-through" or "strikethrough" text effect like this: Google

2. <STYLE> in the <HEAD>

You can set the style for every tag of a certain type by inserting a <STYLE> block in the <HEAD> section of an HTML file. The format is the type of tag (i.e. "A", "P", "H1", "IMG", "TABLE", etc) followed by the property and values in curly brackets ("{" and "}".)

<HEAD>
	<TITLE>Title of my HTML Document</TITLE>
	<STYLE>
	<!--
		A {text-decoration:none}
		B {font-family:sans-serif}

		H1 {
		font-weight:500;
		font-size:150%;
		margin-bottom:0px;
		}

		HR {
		border-top:dashed;
		border-bottom:none;
		border-width:1px;
		height:0px;
		color:#000;
		}
	-->
	</STYLE>
</HEAD>

(Style can use 3 digit colors as well as 6 digit colors. #C90 is the same as #CC9900.)

Some tags have built-in classes. The <A> looks for a "hover" class when you hover the mouse over a link. I can set it like this: A:hover {background-color:#FF6}
(You can even create your own classes, but you can also use style without worrying about classes at all.)

3. <LINK> to a Style Sheet

You can add a <LINK> to an external style sheet in the <HEAD> of your HTML document. The format of the style sheet is the same as the <STYLE> block between the ""

<HEAD>
	<TITLE>Title of my HTML Document</TITLE>
	<LINK REL="stylesheet" HREF="my-style-sheet.css">
</HEAD>

Commonly Used STYLE Properties

font-family font-style font-variant font-weight font-size font	color background-color background-image background-repeat background-attachment background-position background	(Margins are space outside the border) margin-top margin-right margin-bottom margin-left margin	border-top-width border-right-width border-bottom-width border-left-width border-width border-color border-style border-top border-right border-bottom border-left border width height float clear
word-spacing letter-spacing text-decoration vertical-align text-transform text-align text-indent line-height	display white-space list-style-type list-style-image list-style-position list-style	(Padding is space inside the border) padding-top padding-right padding-bottom padding-left padding

See this page for information about the values of each property