CSS - Cascading Style Sheets

Here's where things get pretty! CSS is what we use to really spice things up. XHTML all on it's own is boring. CSS makes things fun and aesthetically pleasing... well, if the person using it knows what they're doing, at any rate...

There are three types of Style Sheets.

External - CSS rules that are kept in a separate file. One of the benefits of external style sheets is that they can be used over and over again by more than one HTML document. Click here to see the external style sheet that is being used on this page. External style sheets must be referenced by the HTML document before they will affect anything. You link an HTML document to an external style sheet by using this code in the head section:

Internal (also called Embedded or Global) - CSS rules that are placed in the head section of a HTML document. These rules will over-ride any External style sheet rules applied to the document. To use an Internal style sheet, you must use the style element in the head section:

Inline (the style attribute) - Inline style rules are used within the body section of an HTML document and apply only to the single element they are placed inside. They over-ride both External and Internal style rules that have already been applied. To use Inline style rules, you must use the style attribute. For example, the following code would place a 2 pixel border around the image referenced:

Now, I'm not a CSS expert... so I'm not about to write a CSS tutorial. Besides which, there's no need for me to do so, as there are thousands of them out there on the internet. A good place to start is W3Schools.com.

I may not be an expert, but there are a few things that I've found useful when venturing into the world of CSS. Here are a few of my favorite tricks:

• Creating a center class - It's very useful to create a class that will center text, images, etc. To do this, use the text-align property, like so:
  
  

• Centering tables - Tables, while useful, can be a pain in the but if you want them to show up in the center of the page (especially in Internet Explorer). Here's a style rule to center them (make sure the percents add to 100):
  
  

• Link color change on mouse-over - Isn't is neat how some pages have links that, when you move your mouse over a link, the link changes color? Here's how to do that:
  
  

See? Not too difficult. Just go out and experiment.