Get Started With Cascading Style Sheets

Create a Linked Style Sheet

By Matt Rotter and Charity Kahn
(9/3/97, updated 11/2/00 by Paul Anderson)

By editing one style sheet file, you can make global changes to all HTML pages that reference the style sheet. To see this capability in action, copy and paste the following code into a text file, and call it style1.css:

H1, H2, H3, H4, H5 { color: red }
BODY { background-color: #cccccc; font-family: Arial, Helvetica, sans-serif }
P { line-height: 200% }
UL LI { font-size: 70% }
.red { color: red }
.green { color: green }
.blue { color: blue }
#big { font-size: 120% }
#upper { text-transform: uppercase }

The first line of this style sheet makes <H1> through <H5> headers red. The second line colors the page's background gray and makes Arial the default font. The third line defines text within <P> elements as double-spaced (200 percent line-height). The fourth line shrinks <LI> text within <UL> elements to 70 percent of their normal size. The next three lines create classes: the red class makes elements red, and so forth. The last two lines create two IDs: the big ID expands text to 120 percent of its normal size, and the upper ID shifts text to uppercase.

Now copy and paste the following code into an HTML document, and call it doc1.html:

<HTML>
<HEAD>
<LINK rel="stylesheet" href="style1.css">
</HEAD>
<BODY>
<H1>Welcome!</H1>
<H3>Here is a list of my favorite colors:</H3>
<UL>
<SPAN class="red"><LI>red</SPAN>
<SPAN class="green"><LI>green</SPAN>
<SPAN class="blue"><LI>blue</SPAN>
</UL>
There are many other colors that I like, but these just happen to be some of the coolest.
</BODY>
</HTML>

See it in action

Now create a second HTML document from the code below, and call it doc2.html:

<HTML>
<HEAD>
<LINK rel="stylesheet" href="style1.css">
</HEAD>
<BODY>
<H2>Let's have fun with layout!</H2>
<STRONG id="big">This text is big,</STRONG> whereas <SPAN id="upper" class="blue">this text is uppercase and blue!</SPAN>
<P>
I like documents to be double-spaced. It covers more space, which makes people think I've written a whole lot more.
</P>
</BODY>
</HTML>

See it in action

By editing your style1.css file you can make big changes in your HTML documents--without touching them. For instance, you can change the BODY line of style1.css to:

BODY { background-color: #000000; font-family: Courier, monospace; color: #eeeeee }

You'll have fun doing this.

Notice that I have added window closing routines to the examples.
The code is 

<CENTER>
<TABLE border=3 bordercolor="forestgreen"><TR>
<TD align="center" bgcolor="thistle">
<font color="Black"><b>Click to<BR>
<INPUT TYPE='BUTTON' VALUE='Close Me Please' onClick='window.close()'>
<BR>Close the<BR>Window</b></font>
</TD></TR></TABLE>