| Previous | Table of Contents | Next |
In this lesson, you learn how to apply styles to HTML documents that are stored in an external file.
In Lesson 1 you learned there are three ways of applying styles to HTML documents: linking, embedding, and inserting them inline. Up until this point, you have dealt only with embedded styles. In this lesson and the next, you learn to use the other methods.
The technique of embedding styles implies a web authoring paradigm that centers around the individual document. You have learned ways to reduce the amount of coding needed to produce an HTML file by applying styles efficiently. The creation of less specific style rules that can be applied in more places leads to documents that are smaller in size and easier to maintain.
This philosophy extends beyond the single document. Style rules that apply to several different text selections on one web page can probably be used in other documents as well. Linking styles take the same style definitions that embed in a single document and store them in a separate file. The file can then be accessed by many different HTML documents.
This capability can move the primary emphasis of your web authoring effort from the document to the web site itself. If you create your styles with the overall appearance of your entire site in mind, you can dramatically reduce the repetitive coding chores, as well as create a consistent and unified look for your site.
You can also consider the advantages of external style sheets by reversing the equation. Instead of servicing many documents with one style sheet, it is possible to associate a single document with several different style sheets. This provides the reader with a choice of styles to suit the limitations of their medium or their particular preference.
You could create style sheets that support different designs for the same documents, full-color versus monochrome displays, high- versus low bandwidth connections, and even new technologies currently under development, such as speech synthesis equipment for nonvisual web access.
The possibilities are endless, but style sheets are still an emerging technology and development is ongoing. Internet Explorer 3.0 provides basic support for linked style sheets, but does not include the mechanisms for allowing the reader to select a style or combine styles from multiple sheets.
A style sheet is nothing more than an ASCII file that contains style rules just like those you embed in HTML documents. You can take either of the sample files that you created while working on the other lessons in this book, copy all of the code between the <STYLE> tags to a new file, and make an effective style sheet.
Explorer Support When you are creating a style sheet from a document with embedded styles, the <STYLE> tags themselves and any other extraneous HTML codes should be omitted—they can cause the Internet Explorer to process the style rules incorrectly.
Once you have created a style sheet, save it to a file with a CSS extension. It can then be placed on your web site at any location that is accessible to your readers. You will be linking your HTML documents to the style sheets using standard URLs, so you can either dedicate a directory to your style sheets or store them with the HTML documents themselves.
The CSS1 standard defines two methods of linking style sheets to HTML documents—using the <LINK> tag and by the @import function. The intention is to provide two ways of specifying multiple style sheet files for two different purposes.
Explorer Support Internet Explorer 3.0 does not support the use of the @import function or the use of multiple <LINK> tags pointing to style sheet files at this time.
Using the <LINK> Tag
The <LINK> tag is an HTML 3 convention that creates a hyperlink from an HTML document to another file type. The use of <LINK> to import style definitions from separate style sheet files is mentioned in the CSS1 standard and defined more fully in a document called HTML3 and Style Sheets. This document was developed by the World Wide Web Consortium.
<LINK> requires several attributes when applying style sheets. Its syntax appears as follows:
<LINK TITLE="color" REL=stylesheet HREF="http://www.mycorp.com/styles/sheet1.css" TYPE="text/css">
The REL= attribute informs the browser that the linked file is a style sheet, HREF= specifies the URL of the style sheet file itself, and the TYPE= attribute supplies the Internet Media (MIME) type of the file. The TITLE= attribute supplies the name for the linked stylesheet that will be used when the browser constructs a style sheet selection menu.
TIP: MIME Types The inclusion of the TYPE= attribute supplies the browser with the means to determine how the linked file should be used. Browsers that do not support the specified MIME type will ignore the <LINK> tag. Internet Explorer 3.0 registers the text/css MIME type at the client during the installation of the browser software. This causes the TYPE= attribute to be ignored when the HTML file is read. You can, therefore, omit the TYPE= attribute when you are designing web pages to be read using Internet Explorer 3.0.
The <LINK> tag should be enclosed within the <HEAD> tags of the HTML document to which you will apply the styles. There is no need for a closing tag (for example, </LINK>). When specifying alternate style sheets, each should have its own individual <LINK> tag, complete with all the necessary attributes.
A browser is then able to construct a menu of alternate style sheets, possibly including additional reader styles stored at the client’s location. Readers with special needs (for example, large type, and speech synthesis) can supply their own styles that can override the author’s styles.
To see the effect of an external style sheet on an HTML file, open the sample file that you used to create the separate style sheet and delete the entire <STYLE> block. Insert a <LINK> element into the <HEAD> block like that shown that references your style sheet file in the HREF= attribute. When you open your sample file in Internet Explorer, it appears just as it did when the embedded styles were present.
Explorer Support When styles are linked, the document should appear just as it did when they were embedded, but in some ways it probably won’t. Internet Explorer 3.0 has problems with certain style properties when they are used in external style sheets; for example, the background property. Backgrounds defined in linked style sheets are ignored when a linked style sheet is applied to the document, as are graphic image backgrounds in embedded styles.
Using the @import Function
The @import function, defined in the CSS1 standard, is another method of linking style sheets to HTML documents. It is designed for use when style sheets are to be automatically applied to the document, without any interactive selection from the reader (as with <LINK>).
The syntax of the @import function is included within the <STYLE> tags, along with any embedded styles for that document. A typical example would appear as follows:
<STYLE>
@import url(http://www.mycorp.com/styles/sheet1.css);
P {font-size: 16}
</STYLE>
Specify multiple style sheets by using individual @import declarations, one after another. The contents of the style sheets are applied according to the order in which they are listed.
TIP: Conflicting Styles. Sometimes styles from different sources provide conflicting values for the same properties. This is a complex subject and the order of precedence defined by the CSS1 standard is discussed in Lesson 20.
In this lesson, you learned how to create a style sheet file and apply it to an HTML document. In the next lesson, you learn how to apply inline styles to specific document elements.
 |
 |
 |