Linking to Style Sheets

line.gif

Inline Style Sheets vs Linking to Style Sheets

As previously explained, a style sheet can be defined for a document by enclosing the selectors and classes within a <style> - </style> bracket. This is fine when the styles defined therein are applicable only to the document in which they are included. However, it was also previously mentioned that it is wise to split large documents into chapters and topics, thereby making them more accessible. When a book is expressed in the form of many HTML documents, replicating the styles in the head section of each document will lead to maintenance and consistency problems. Fortunately, the tag <link> facilitates the inclusion of separately defined styles into a document.

Separately Defined Style Sheets

The syntax for including a separately defined style sheet into a document is shown below.

<link rel=stylesheet type="text/css" href=url title="Style">

The specified relationship to the current document is stylesheet, which is further qualified by type="text/css". The url that is supplied is the url of the style sheet document. The url can be a relative or full url, which implies that style sheets can reside on a remote server. The title is advisory and optional.

Exercise 23

Imagine that you are creating a text book in which you wish to define classes that control text indenting and font family, color and size for every page of the book. In particular, you wish to have three classes to be applied to paragraphs:

Write a style sheet that:

By way of testing this style sheet, write a HTML document that:

Hints

Solution

Take this link to see the solution of the exercise. You should view the source of the solution and compare it to that which you provided. To gain a full appreciation of the solution , you will also need to view bookSty.htm. You should add the solution of this exercise to the samples panel that you created in exercise 6.

The next section next.gif discusses the cascading of style sheets