External Style Sheets

Use the code

<link rel="stylesheet" href="/styles/screen.css" type="text/css" media="screen">
<link rel="stylesheet" href="/styles/print.css" type="text/css" media="print">

to associate a stylesheet with your web page. Replace /styles/ with the name of the virtual directory where your .CSS files are located. Browsers tend to be very fault tolerant so it is possible to get away with not specifying the type="text/css" attribute. However, there is no good reason for leaving it out. It is possible to have links to multiple stylesheets. When you want to draw on styles at different locations this is unavoidable. However, if you are merely in the habit of breaking up your stylesheet declarations into multiple files for coding convenience, it is better to use @import url(url) at the top of one "main" stylesheet.

Though frequently omitted, it is good practice to anticipate the need to print any HTML document by providing separate stylesheets for on-screen and on-paper rendition of its contents. On this site we have done so by placing our style definitions in a sequence of logically named files such as logo.css, lists.css etc. The screen.css and print.css stylesheets linked to in the document header contain only two things

• A sequence of @import url(url) declarations to the other stylesheets we use.
• Style definitions for a very small number of selectors which differ for on-screen and on-paper rendering. Actually, in our case there are only two differences
  • We remove the left and right page borders we use to display the logo and site navigation links that are of no relevance to the printed page.
  • We use the code visibility:hidden to hide the HTML div elements that contain the logo and site navigation links.

Depending on your site design you may find it necessary to change a small number of colors to ensure more legible copy. If you find that the screen and print versions of your stylesheets have more extensive differences a complete rethink of your design strategy is in order.

The media attribute can have a number of other possible including all, handheld, braille, aural etc with all being the default. Depending on your audience you may have to provide additional stylesheets to cater to other media.

Finally, one more trick worth sharing - if like us you are in the habit of using a number of @import statements it is only a matter of time before the imports in the print and screen versions of your styles go out of sync. The easiest way to avoid this is to replace multiple imports with one single import statement of the form @import url(/styles/imports.css). imports.css should contain nothing but the @import statements you want to include in the two versions of your styles. Now you only ever need to update your imports in one location and be sure that they are available in both versions of your stylesheet.