While it is a great advantage to be able to set layout options for your entire page with one set of instructions in the HEAD of each page, it is even better to used linked style sheets. With linked style sheets you link to a style sheet on your server within the HEAD section of all your pages. Then, by changing the one file that each page links to, you change the layout for every page that links to that style sheet, even if it's your whole web site! By editing just one file, I can change the look of my entire web site consisting of hundreds and hundreds of pages.

This page shows you how to link to a style sheet. You link to style sheet simply by placing a link to it in the HEAD section of your page, like this:

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

There is only one part you should change, and that's the path to the stylesheet and the stylesheet name. In the above example,

"mystyles.css"

...is what I'm referring to. I named the stylesheet "mystyles" since it is the one that creates the style used for the majority of my pages. You can name your stylesheet anything you want.

You can keep your style sheet in a separate folder, called anything you like, if you wish. Then you would link to it like this:

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

The path, in my case, was simply "foldername/" because that's what I named the folder I keep the style sheet in, and that folder is in the same folder as my HTML files.

Every page you link to your stylesheet will have it's layout governed by that stylesheet unless you override a style on the page itself.

So what does that linked-to style sheet look like on the inside?

It's just a plain text file with the same styles coded into it that you'd use in the HEAD section of your page for embedded styles, only they're placed there rather than in the HEAD section of your page. The only thing different is that when adding styles to the HEAD section, you surround the actual styles with:

<STYLE TYPE="text/css">
<!--

(Styles would go here)

-->
</STYLE>

In your style sheet the link you create to the style sheet takes care of all that, you only code the actual styles into your style sheet. If you control your page layout using linked style sheets, you can change that one file and change your whole site!

If you haven't used any style sheets before, you may wonder exactly what to put in your style sheets. You can use anything there that you can put into the HEAD section of your page using embedded styles. To see the actual sitewide style sheet I'm using here, I've placed my stylesheet on a web page.

There are basic things you can do in the Introduction to CSS that I haven't actually created individual tutorials for yet, so you might want to read those over as well. In that, you'll learn how to use CSS to code your body color, font sizes (and you're not limited like in HTML, you can code fonts to the exact pixel height you want), how to set page margins and more.

Since a CSS file is just a plain text file, it can be written in any text editor. Once written, just pick a name for it, and type in the .css extension to the end when you save it.

Example name: mystyle.css