Again, niftier and niftier, but what I want to do that to 100 documents? It might be easier for me if I took the styles out of the individual style document.
So suddenly we are back to here... except..
<html>
<head>
<title> my first cool stylesheet page</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>If I ruled the world</h1>
<p>First, everyone would use styles</p>
<p class="this">Second, everyone would give me money</p>
<p>Third, <a link="#">links</a> wouldn't have underlines</p>
</body>
</html>
and this is what is on mystyle.css
body { background-color: #CCFFCC}
h1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18pt; color: #339966}
p { font-family: Arial, Helvetica, sans-serif; font-size: 12pt; color: #996633}
a { color: #CC3300; text-decoration: none}
.this { font-weight: bolder; color: #FF3300; background-color: #FFFF00}
It's really that easy...
One last little trick.. and this only works on IE4&5
a:hover {color:red}
This will make your text red when people mouse over it. You can also ad the no underline code if you want, or leave it and an underline will appears, or add the background color... It's a tiny line of code, and adds value for those who are using the right browser, and so why not include it?
Now go play!...