CSS Tutorial

Styles can be applied locally, in an internal style sheet, or as a seperate external style sheet.

Applying styles locally is done within a standard html tag. It affects only that individual tag. For example, if you wanted the image to the left to have a double border around it, you could apply a style to to the img tag. The new tag would look like this:
<img src=dog.gif style="border:double medium blue">.
The image would now look like the one to the right. I find that most of the "stylin" I do is applied not locally to an existing tag but to either internal or external style sheets. I think that means that I am a real "stylin' guy".
Internal style sheets put the all the style properties within the head of the html document you are creating. All of the style properties go after a <style> tag and before a </style> tag within the head of the html document. Internal style sheets are currently the most common use of styles on the web.
External style sheets probably hold the most promise. Imagine setting up a huge style sheet with every possible formatting option you might use. You would simply then use that tag in all future html documents as long as you reference the external style sheet in the head of each html document. The external style sheet is just a text document with a list of every style you ever could use. The way to force each future html document to use the style is to link it to the external style sheet. The code for that goes in the head of the html document and looks like this:
<link rel=stylesheet type="text/css" href=mystylesheet.css>.

When you create a style on either an internal or external style sheet, you can use the standard html tag like p for paragraph or img for image. You then follow the tag name with the properties and values enclosed in wiggly brackets{}. I prefer to give my html tags a class name if I think I will have more than one style of each tag. For example if I thought I might have several different styles of paragraphs, I might name them p.yellow, p.large, or even p.fred. It doesn't matter what the class name(after the .) as long as you use the right class name in the html portion also. So for example the style code for p.yellow might look like this: