CSS Tutorial: How To Make An External Stylesheet

You may have heard other webdesigners mention a strange Web language called "CSS" in their explanations of how to make layouts. I have made only passing references to it in other tutorials, because to try to explain CSS in the context of another tutorial is cumbersome. Therefore, I decided to write a small tutorial about the actual language and how to use it most effectively. Here, you will learn how to make a CSS file which will control the design for all of your pages in one fell swoop; the file is otherwise known as an external stylesheet.

If you're a beginning webdesigner (or even if you're very experienced in HTML design), you may have been daunted by finding out that much of your styles and formatting have to be repeated in detail every time they occur. If you want a heading to be green, bold, and have a border of 1px black, then you have to repeat the color, the border stuff, and the bold formatting every time that heading appears. It's clunky, tiring, and time-consuming, but with HTML, that's the only option you have, other than just giving up on specified colors and going with browser default colors (I shudder to think of it).

But CSS can help you with this. CSS, standing for "Cascading Style Sheet," is a Web language that works alongside rather than in place of HTML. While HTML provides the strong, stable structure of a Web page, CSS flits in and waves its magic wands of colors, fonts, and formatting, turning plain old default into stylish and presentable.

Let's look at the anatomy of a typical stylesheet first. Click here to pop up a graphic for explaining the parts of a typical stylesheet. Remember, however, that this is only an example, and only my way of doing it--and my way is definitely not the only way.

The graphic itself is fairly self-explanatory, so I won't rehash all the details, but I do want to point out a few tips about stylesheets:

• The rules for displaying each part of the page (body, links, headings, subheadings, etc.) are contained within bracket marks. If you don't type a bracket mark before you begin a set of rules AND after you are finished with one set of rules and want to move on to the next set of rules, your CSS document will not render correctly.
• After each individual rule, you place a semicolon to let the browser know that you are moving on to another rule for the specified element. If your CSS document is not rendering correctly, check back through your document--often, I will make the error of placing a colon after the rule ends instead of a semicolon.
• You can specify how anything looks on a page--and I do mean anything! In addition to specifying how the body of the page looks, how links look, and how headings and subheadings look, you can specify how you want images to be placed, how HTML tables, table rows, and table cells look and are placed, etc.
• Wondering why there are so many number (#) marks in the CSS code? Those markers indicate where a hexadecimal code will go. Hexadecimal codes are six-digit codes that tell the browser what color you want the specified CSS element to be. For instance, if you wanted a black background for your page, you would type "background-color: #000000;".
• There are many, many more sets of rules that you can add to the stylesheet beyond what I have shown here. What I have shown is a very basic stylesheet that covers most of what beginning designers will need CSS to do.

Now, for the actual construction of a stylesheet. This step-by-step process will lead you through the creation, saving process, and implementation.

1. Open a new Notepad/Simpletext document. (I've never tried using a word-processing program to create my CSS documents, but I imagine the spellcheck would go nuts.)
2. Type the rules for your stylesheet into this blank document. Remember the beginning and ending brackets for each set of rules!
3. Fill in the hexadecimal (six-digit) color codes for each of the elements in your stylesheet. You can find a convenient list of hexadecimal codes at Webmonkey.com.
4. Check over your stylesheet for mistakes, like leaving out brackets, semicolons, and colons, or mistyping color codes.
5. Go to File > Save As...
6. When the "Save As..." dialog box comes up, type a fairly short and memorable name for your stylesheet. I often name mine simply "style." DON'T HIT SAVE YET! Also, erase the ".txt" that follows your filename, and replace it with ".css"--this will help your computer realize that this is not a text document, but a CSS stylesheet file!
7. There is a dropdown box right below where you just typed in the name for your stylesheet. It should say something like "Save as type:" beside it. Click the dropdown box, and instead of asking it to save your stylesheet as a text document (which will make your CSS document save as a ".css.txt" and therefore be worthless), ask it to save as "All files".
8. NOW hit Save, and you are finished with your stylesheet!
9. To implement your external stylesheet in your HTML page, type or copy/paste the following code somewhere between the <head> and </head> tags in your HTML document:
   <link rel="stylesheet" type="text/css" href="http://www.yourdomain.com/foldername/THE_NAME_OF_YOUR_STYLESHEET.css">
10. In the "href" blank (where I've put "http://www.yourdomain.com/foldername/THE_NAME_OF_YOUR_STYLESHEET.css"), change the information to suit your domain name, the folder where your CSS stylesheet will be located online, and the name of your stylesheet. Be sure to provide the full path to the file (http: and everything) in the "href" blank--this will ensure that your stylesheet will be implemented correctly.