12. Styling your Site

Right at the outset I mentioned linking style sheets and web pages, but we haven't looked at that in any detail. That is the subject of this final session.

Linking and Embedding

Once you have a style sheet, there are two ways of associating a web page with it. The first, as we have been doing during these lessons, is to link the page to the style sheet.
The other is to embed the style sheet in the head of the web page.

Which is preferable? If you think about one of the most important advantages of style sheets, the ability to update and overhaul the appearance of a site without modifying the web pages themselves, then you'll agree that linking is to be preferred, as otherwise, when you alter your style sheet, you'll have to edit it in every page. This negates a lot of the advantage of separating content and presentation.

When might embedding be a good idea? If your pages are to be downloaded, and read off-line, then users will be unlikely to locate and download any style sheet. So when they come to read the page off-line, no style. Netscape Navigator makes matters worse, as it fails to load a page if the style sheet can't be found.

But overall, linking is much to be preferred.

Let's now look at how you do it.

Linking

If you open our sample HTML page, you'll find the following in the HEAD of the page:

<LINK REL="STYLESHEET" TYPE="text/css" HREF="core-style.css">

Let's take a look at each attribute briefly.

REL="STYLESHEET" this says that it is a forward link, and tells the browser what to expect at the other end, namely a style sheet.

TYPE="text/css" Theoretically, style sheets might be written using any number of languages. The style sheets we've been talking about in these lessons are Cascading Style Sheets (CSS). Extensible Style Language (XSL) is another that may become important. This attribute tells the browser what format it is going to receive the style sheet in. The content type is necessary.

HREF="core-style.css" tells the browser where to locate the style sheet. The destination is specified in the same way that hypertext link (A HREF="link destination") destinations are, with either a relative or absolute URL.

To link to your style sheet, all you need to do is paste the line of code above into the HEAD of your HTML file, then change the HREF value to point to the location of your style sheet.

Embedding

If you want or need to embed your style sheet, the following element is placed into the HEAD of the HTML file.

<STYLE TYPE="text/css">
<!--
BODY {margin-left: 15%}
H1 {text-indent: -10%}
H2 {text-indent: -8%}
H3 {text-indent: -6%}
H4 {text-indent: -4%}
P {text-indent: 5%}
-->
</STYLE>

The TYPE content descriptor is required, and is the same as for linked style sheets. All we have done is placed the style sheet inside the <STYLE></STYLE> element, and for good measure, placed comment tags around the content, so that older browsers which don't recognize the STYLE element don't show the style sheet as content.

Next

We are almost done now. Next we will take a quick overview of how far we have come, and think about where you can go next, to really master style sheets.