A 'Short' Tutorial on CSS- Spiders love CSS . . .

How we used CSS for Spider-Food

My task on the Spider Food site was to implement CSS across the entire site, and generally streamline management. To accomplish this, I implemented custom classes, and redefined the formatting for specific HTML elements. This allowed me to remove ALL <font> tags, and sometimes cut as much as 2K off a single page, just in reduced formatting.

We'll start the tutorial by teaching you how to add style sheets into your page, and then we'll show you how to define your own classes.

Getting your Style Sheet into your page

A style sheet can either be coded directly into your HTML, or it can be linked from a separate file. My personal recommendation is to link your files, as this allows you to apply the same style sheet to multiple documents.

To insert a style sheet into your document, you insert the <style> tag into the HEAD of your document. Here's an example, using a snippet of Spider Food's CSS file:

<style>
  style definitions go here . . .
</style> 

If you wanted to link your style sheet, you would save everything between the <style> tags to a text file, with the .css extension. You would then use the following code in the HEAD of your document:

<link rel="stylesheet" type="text/css" href="spider.css">

This pulls the style sheet into your page every time the page is loaded. So if you had over 70 pages linked to one style sheet, as we've done with this site, you could change the color of all your links by changing just one file.

So now you're saying, "Dan, quit teasing, how the heck do I change the color of my links???"

Click Next to find out . . .