[go: up one dir, main page]

Externalizing Your Style Sheets

Web Review
March 1998

One of the more interesting facets of CSS is the ability to have a Web page import files that contain styles and use them in the display of the page. These separate files are known as external style sheets. This month we're going to find out how they're created and employed in the display of a Web page.

Creating the Style Sheet

Before you decide to apply a style sheet across your site, the first thing you need to do is to decide on the look you're trying to create. Some items you'll want to take into consideration include whether you should specify font styles and sizes, and which colors will complement your existing design.

You should also test your site out to see how it looks on screen, on multiple platforms, and in different browsers. Remember, what looks nice in Netscape might not translate that well to Internet Explorer (and vice versa), and fonts are rendered differently between the Macintosh and Windows operating systems.

To create your style sheet, open a new document in a text editor (such as BBEdit, Microsoft Word, emacs, etc.) and key in your styles. When you're done, you should have a file that looks something like this: 

/* General style sheet for My Web Site */
BODY {font-family: serif;
      background-color: silver;}

H1 {font: x-large Verdana, sans-serif;
    color: olive;
    border-bottom: thin black solid;}

TABLE {margin: 0;}

.sidebar {background-color: olive;
          padding: 0.5em;}

.sidebar UL LI {list-style-type: none;
                margin-left: 0;
                margin-right: 0.5em;}

.sidebar UL LI A {color: #FFCCCC;}

.body {background: white no-repeat center 
       url(http://www.site.org/pix/logo.gif);}

IMG.icon {border: outset gray 3px;
          padding: 0;}

P {margin: 0em 0.5em;
   text-indent: 1em;
   color: #333333;}

CSS Means What?

Some authors have reported trouble with getting their ISPs to correctly serve up CSS files. Apparently, with some Web servers, .css is mapped to the MIME-type x-application/css, or "Continuous Slide Show," instead of the MIME-type text/css. The style sheet gets mangled into something else. If you find you're having this problem, then you'll need to contact your ISP and explain the problem. If they refuse to fix it, then you may have to consider switching ISPs.

 

That's the whole file. No HTML tags should appear in the file, not even the <STYLE> tag, and certainly none of the header, body, or HTML tags.

Now you'll want to save the above text to a file called general.css. The general part is the file's name (I picked "general" because this is the site's general style sheet) and the .css indicates it's a style sheet. (See the sidebar CSS Means What? for a caveat on the .css part.) Place the style sheet where your Web browser can get to it, and then we'll look at how to associate your style sheet with the HTML documents.

LINKing Up

The first (and best-supported) way to tie a style sheet to a Web page is by using the LINK tag. This tag is always found in the <HEAD> container of a document, like this: 

<HEAD>
  <TITLE>My Home Page</TITLE>
  <LINK REL="stylesheet" TITLE="Default Styles"
    HREF="general.css" MEDIA="screen">
</HEAD>

So what does all that mean? REL is the relation of the thing being LINKed to the Web page; in this case, the style sheet. TITLE is the title you give to the Web page that contains the style sheet. The value of HREF is the URL (location) of the style sheet. MEDIA is used to list the various media for which this particular style sheet can be used. Since we're designing this page for use on the Web, we will use screen, which is another way of telling the document to render the style sheet for a "monitor."

Now, assuming the browser can find the style sheet at the URL you specified in the HREF portion of the LINK tag, the styles will be imported and used in the display of "My Home Page."

You can use more than one LINK tag in order to import multiple style sheets. However, the browser should only pay attention to the first LINKed style sheet whose REL is "stylesheet." (In the real world, browsers may not do this, so be careful.) So why have more than one LINK tag? Because you can set other values for REL, which we'll explore next.

Alternates

Let's say you have two other style sheets called blue.css and wiggly.css. You want to allow the user to apply those styles to your page, but you only want one set of styles applied at a time. In other words, the page should be displayed using the styles in general.css, or blue.css, or wiggly.css, but not any combination of the three.

In that case, decide which one should be the default and set the other two to be alternate style sheets. You would do this with the following code: 

<HEAD>
  <TITLE>My Home Page</TITLE>
  <LINK REL="stylesheet" TITLE="Default Styles"
    HREF="general.css" MEDIA="screen">
  <LINK REL="alternate stylesheet" TITLE="Blue"
    HREF="blue.css" MEDIA="screen">
  <LINK REL="alternate stylesheet" TITLE="Wiggly"
    HREF="wiggly.css" MEDIA="screen">
</HEAD>

When this page is loaded into a browser, it should display the page using the default style sheet. The code specified in the LINK tags above should also allow the user to pick one of three styles from a menu, which the browser should generate automatically -- in other words, you don't have to do anything -- and then call in the style sheet the user chooses.

Importing Styles

LINK isn't the only way to do things, however. Instead of LINKing, you can use @import instead.

Similar to LINK, you can bring in styles by using the @import directive. As you might expect, @import allows you to import styles into your document. Like other style declarations, @import has to go into a style sheet, even if it is just the one at the top of the page. For example: 

<STYLE type="text/css">
  @import url(general.css);
</STYLE>
Import Restrictions

There are a few problems with using @import. The most serious being that only the most recent browser versions will recognize it at all. Unfortunately, the styles you import to your pages won't be rendered in older browsers. However, you can turn this limitation into an advantage. Since older browsers may not render style sheets correctly (if at all), Todd Fahrner, a member of the CSS Working Group, proposed on Usenet that authors use this limitation as a way to "hide" style sheets from older browsers.

 

The advantage to importing style sheets is that you can import multiple sheets and have all their styles applied to your document, with the cascade determining which specific styles are actually used. So if we wanted to combine the styles from general.css, blue.css, and wiggly.css, you would declare the following: 

<STYLE type="text/css">
  @import url(general.css);
  @import url(blue.css);
  @import url(wiggly.css);
</STYLE>

This might lead to a page whose appearance is truly awful, truly excellent, or somewhere in between -- it all depends on the styles used. Still, if you set up your style sheets with some forethought, you gain a lot of power and flexibility in document appearance.

To Conclude

As you can see, linking or importing style sheets to your site has many advantages. The first is that you won't have to specify the same style sheet in each page, which would make changing them a nightmare. They also allow you the ability to offer different style sheet options to your readers, as well as to hide them from older browsers.

In next month's column, I'll talk about ways you can set up (or perhaps alter) the structure of your Web site, and your Web pages, so that you can take full advantage of linked and imported style sheets.