Incorporating Styles into a Page

Once we've decided how we want our page to look and know what our style tags will look like, we need to take the final step and apply this information to the page. Just like we can't add script code to the page without enclosing it in a variety of <SCRIPT> tags, we can't add style sheet information without some sort of structure. There are a few different ways to add styles to a page, and they each have their own set of advantages and disadvantages.

The Single <STYLE> Tag

Our first example of style sheets uses probably the most intuitive method of adding style information. With this method, we open a <STYLE> tag, provide all of the formatting information for our page (according to the syntax we just laid out), and then close the tag. Usually, we'll place this <STYLE> block in the header of the HTML document, like we did in the first example.

<STYLE>
<!--
BODY   {font-family: Times;
   font-size: 125;
   font-weight: bold; 
   color: red }

.layer   {font-family: Arial;
   font-size: 40;
   font-weight: bold;
   color: blue;
   margin-top: -75px }
-->
</STYLE>

This makes sense, but it does have a few limitations. Most importantly, this technique requires that we hardcode the style information into every single HTML file that needs it. If we need to change one small bit of the formatting for our pages, then we have to manually open, edit, and save each file. Also, in addition to being difficult to change, information repeated in many documents needs to be downloaded repeatedly, and this consumes time and server/network resources.

We also need to remember to enclose our style information inside the HTML comment tags  so that browsers that don't understand style sheets won't attempt to display the information inside of our <STYLE> tag as text.

Using <STYLE> with Individual Tags

For quick and easy addition of style information we can add styles directly to almost all elements on the page.

<H1 STYLE="color:purple; font-size:100">A Big Ugly Heading</H1>

This biggest advantage to this method is its flexibility. Style information can be added to individual elements, and it will only affect the specific instance of the element it's added to. In this example, we'll only change one <H1> tag, not all of the first-level headers. This ability makes it even more useful when we're using just a bit of style information for the sake of scripting.

However, we still haven't done anything about the problem of repeating identical style information across pages. To fix that we'll need to use one of the next two methods.

The <LINK> Tag with Style Sheets

If we have a set of style information that we'd like to apply to multiple pages (or even think we might want to, someday) then we can save this information in a separate file. Adding these styles to a new page is now no more complicated than adding a single <LINK> tag to each page that should incorporate the style information:

<LINK REL=STYLESHEET TYPE="text/css" HREF="http://yourserver/yourpath/style.css">

This tag can be placed in the <HEAD> of the document, in the same location where we've been placing all of the in-line style information.

The HREF attribute should be changed to point at the appropriate style sheet, which should incorporate style information in exactly the same format as we saw when we used the <STYLE> tag – just omit <STYLE> and </STYLE>:

BODY   {font-family: Times;
   font-size: 125;
   font-weight: bold; 
   color: red; }

.layer   {font-family: Arial;
   font-size: 40;
   font-weight: bold;
   color: blue;
   margin-top: -75px }

Using @import

There is another way to automatically apply style sheets and still keep the file sizes down, the @import notation. This functions in a very similar way to using LINK and HREF, except that the URL of the style sheet is specified within an @import line.

<HTML>
<HEAD>
<TITLE>CSS Style Example</TITLE>
<STYLE>
@import URL("http://rapid.wrox.co.uk/books/0707/style.css");
</STYLE>
</HEAD>
<BODY>
<CENTER>
Wrox Press
<DIV CLASS=layer>DHTML Programming</DIV>
</CENTER>
</BODY>
</HTML>

This notation tells the browser to get the style sheet style.css from the server at rapid.wrox.co.uk. If we place the @import line between <STYLE> tags in the <HEAD> of our document, the style will be automatically retrieved and applied before our document is displayed. These are the preferred methods of incorporating style sheets using Internet Explorer 4.0: it's easy, and they maintain all of the advantages we gain from using style sheets.