Linked Cascading Style Sheets
View the source of this document, and you'll see how simple it is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Linked Cascading Style Sheets</title>
<style type="text/css" media="print">@import url("http://www.homemadeparachute.com/courses/css/edu-print.css");</style>
<style type="text/css" media="screen">@import url("http://www.homemadeparachute.com/courses/css/courses_screen.css");</style>
<base href="http://localhost/~james/courses/" />
<script src="courses.js" type="text/javascript" charset="iso-8859-1"></script>
</head>
Instead of defining all the styles in the document, there's a document called courses_screen.css which you can see looks just like the style sheets on the previous page. By embedding the CSS definitions within this page using the <style> tag in the header, we can absorb those definitions and use them on this page.
Where this becomes truly powerful is in the scale of implementing CSS across an entire web site, all defined within one single document.
Download these three documents: page-1.html, page-2.html, and change.css. Two of them are pretty basic HTML pages, and the third is an external style sheet that both reference.
The style sheet looks like this:
a {color:#009900;
text-decoration: none}
a:visited {color:#669900}
a:hover {color:#00FF00}
.normal {font:12px Trebuchet MS;
line-height: 16px;
color:#666666;
text-indent: 5em}
.header {font:21px Charcoal;
text-transform: uppercase;
letter-spacing: 0.5em;
color:#666699}
Page-1.html looks something like this:
My Header
Cascading Style Sheets (CSS for short) are a relatively new method of handling page layout and typography on the web. Just like style sheets in Quark Xpress, Microsoft Word, or any other word-processing program, they allow you to create styles and assign properties to these styles, then reference the styles whenever you wish. The advantage is that you need only define the style once, then reference it as many times as you need to. If you change the base definition, all references to the style change.
CSS are "cascading", because styles can be nested within each other. For instance, this block of text is defined by a style called "normal", which defines a font, a size, and a measure of leading. If a new style is introduced, it will adopt any qualities of "normal", then introduce its own, so a second style called "leaded" might increase the leading until either a third style is introduced, or it itself is closed.
Change the .header style so it looks like this:
.header {font:30px Arial;
text-transform: none;
letter-spacing: 1em;
color:#FF0000}
Now, load page-1.html and see what it looks like. It should look something like this:
My Header
Cascading Style Sheets (CSS for short) are the tool for handling page layout and typography on the web. Just like style sheets in Quark Xpress, Microsoft Word, or any other word-processing program, they allow you to create styles and assign properties to these styles, then reference the styles whenever you wish. The advantage is that you need only define the style once, then reference it as many times as you need to. If you change the base definition, all references to the style change.
CSS are "cascading", because styles can be nested within each other. For instance, this block of text is defined by a style called "normal", which defines a font, a size, and a measure of leading. If a new style is introduced, it will adopt any qualities of "normal", then introduce its own, so a second style called "leaded" might increase the leading until either a third style is introduced, or it itself is closed.
Linking Methods
There are two main ways to embed a style sheet in an HTML document:
- <link>, as in:
<link rel="Stylesheet" href="styles.css" type="text/css">
- <style>, as in:
<style type="text/css">@import url(styles.css);</style>
The main difference between these methods is that the <link> method is older and more widely supported. <style> is a bit flaky, especially on some less-than-current browsers (note, not "older" browsers: even Internet Explorer 5.5 is a bit wacky in its support for the <style> method). However, this lack of support can work to your advantage: say you need to support Netscape 4.x for some reason. Netscape 4.x can't use the <style> method at all, but it can't support a bunch of CSS declarations either, so you could use <link> to embed some basic styles, then use <style> to embed a further set of styles that won't break Netscape's rendering. On the other hand, if you don't want to support Netscape 4.x at all, using <style> will ensure that Netscape 4.x users will get no styles at all, but will still see the basic content of the site. That might be a way better outcome than trying to force Netscape 4.x to render something it can't, and having it break. You can see this in action on this very document, if viewed in N4.x.