CSS Design and style... the possibilitiesCSS Design and style... the possibilities

Call an External Stylesheet

Calling your external stylesheet

There are a few ways to do this, @import is generally preferred these days because older, V4, browsers do not understand it, so they get an unstyled page. They get all the information, just not styled (a nice way of asking them to upgrade?). And in the future when @media types are fully supported it will be THE way to go.

But there is today's fashion of providing alternate stylesheets, the alternate ones need to be in a <link rel..> statement (via the <link> element) . As opposed to an @import statement (via the <style> element)

e.g. Alternate external stylesheet named myotherstyle.css...

alternate stylesheet

<head> 
<link rel="alternate stylesheet" 
 type="text/css" media="screen" href="myotherstyle.css" />
</head>

link to main stylesheet
using 

<head> 
<link rel="stylesheet" 
 type="text/css" media="screen" href="path/to/mystyle.css" />
</head>

importing stylesheets

<head> 
<style type="text/css" media="screen">
@import url (path/to/mystyle.css); 
</style>
</head>

Or, which I generally use (quote instead of brackets) because it is not read by IE4, thus effectively hides the call from V4 browsers:

<head> 
<style type="text/css" media="screen">
@import url "path/to/mystyle.css"; 
</style>
</head>

Media Types to follow later, but if all you use meantime is screen it will mean someone attempting to print the page will get plain text. At this point this may be preferable to a multi colored 3 column layout. If I were printing I know I might just want the info not the colors!


Resources:

Updates:

«« Previous Page | Crib Sheet Index | Next Page»»