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.
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.
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-styles.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-styles.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.
Fortunately, you can ignore all of that, because Style Master will link web pages to your style sheet for you automatically.
To link a web page to a style sheet using Style Master
1. choose
from the menu2. locate the page you want to link to the current style sheet in the Open dialog box, then click
Style Master adds the necessary code to your web page.
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: 30%}
H1 {text-indent: -20%}
H2 {text-indent: -15%}
H3 {text-indent: -10%}
H4 {text-indent: -5%}
P {text-indent: 10%}
-->
</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.
Again, you don't need to know this kind of thing with style Master, because it will embed a style sheet for you.
To embed a style sheet in a web pages
1. choose
from the menu2. locate the page you want to embed the current style sheet in using the Open dialog box, then click
Style Master adds the necessary code to your web page.
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 master style sheets.