A style sheet is often written and saved as a .css file on the hard drive.
Thereafter, any HTML (.htm) Web page document that wants to use the styles
defined in the .css file merely references it as a “link.” You see how to link
HTML to a CSS file in a minute.
Run Notepad (if you use XP, choose Start➪All Programs➪Accessories➪
Notepad). Then type this in to define an ultra-simple style that tells a Web
site how you want paragraphs of text displayed:
p
{
color: blue;
text-align: right;
font-family: courier;
}
Save this style sheet by choosing File➪Save As in Notepad, and then naming
the file ParaStyle.css. You can use any name you want, but you need to refer-
ence that name in your Web page’s HTML code. To do so, delete everything in
Notepad, and type in this HTML page that references your ParaStyle.css style
sheet file:
<html>
<head>
<link type=”text/css” rel=”stylesheet” href=”ParaStyle.css”>
</head>
<body>
<H1>Headline Text</H1>
<p>This is body text</p>
</body>
</html>
Use Notepad’s File➪Save As feature to save this code to a file named
PStyle.htm in the same directory where you saved the ParaStyle.css file.
This highly simplified Web page code illustrates how an external style sheet
file works. In the .css file, you specified that the <p>(paragraph) element
should be blue, right-aligned, and in the Courier typeface. In your HTML
code, you linked to a style sheet named ParaStyle.css. This style sheet is
located in the same directory as the .htm file.
You have not defined a style for the H1 headline style, so it defaults to the
browser’s standard size, color, position, font (and perhaps other qualities) for
the H1 style. With the Internet Explorer defaults, the headline is left-aligned,
black, and a serif font.
32 Part I: The ABCs of CSS
