Filename: stylesheet.css
/* this is tacky, so we'll leave other media alone... ;-) */
@media screen {
/* top right bottom left */
BODY {
margin: 6pt 6pt 6pt 6pt;
border: 6pt dotted rgb(50%,50%,0%);
padding: 6pt 6pt 6pt 6pt;
background: rgb(100%,100%,0%);
color: rgb(0,0,100%);
}
H1 {
margin: 6pt 6pt 6pt 6pt;
border: 6pt dashed rgb(50%,0,50%);
padding: 6pt 6pt 6pt 6pt;
background: rgb(100%,0%,100%);
color: rgb(0,100%,0%);
}
P {
margin: 6pt 6pt 6pt 6pt;
border: 6pt dotted rgb(0%,50%,50%);
padding: 6pt 6pt 6pt 6pt;
background: rgb(0%,100%,100%);
color: rgb(100%,0%,0%);
}
DIV.chapter P:first-letter {
text-transform: uppercase;
font-family: serif;
font-size: 200%;
font-weight: bold;
font-style: italic;
/* margin: 6pt 6pt 6pt 6pt;
border: 6pt dotted rgb(67%,33%,0);
padding: 6pt 6pt 6pt 6pt;
*/ background: rgb(33%,67%,100%);
color: rgb(50%,100%,0%);
}
DIV.chapter P:first-line {
/* margin: 6pt 6pt 6pt 6pt;
border: 6pt dotted rgb(0,67%,33%);
padding: 6pt 6pt 6pt 6pt;
*/ background: rgb(100%,33%,67%);
color: rgb(0%,50%,100%);
}
SPAN {
/* margin: 6pt 6pt 6pt 6pt;
border: 6pt dotted rgb(33%,0,67%);
padding: 6pt 6pt 6pt 6pt;
*/ background: rgb(67%,100%,33%);
color: rgb(100%,0%,50%);
}
OL {
margin: 6pt 6pt 6pt 6pt;
border: 6pt double rgb(100%,0%,0);
padding: 6pt 6pt 6pt 2ex;
background: rgb(25%,100%,75%);
color: rgb(25%,50%,25%);
}
LI {
margin: 6pt 6pt 6pt 6pt;
border: 6pt dotted rgb(0%,100%,0%);
padding: 6pt 6pt 6pt 6pt;
background: rgb(75%,25%,100%);
color: rgb(25%,25%,50%);
}
A {
font-family: cursive;
}
A:link {
background: white;
color: blue;
}
A:visited {
background: white;
color: magenta;
}
A:hover {
cursor: help;
border: 1ex dotted rgb(100%,0,0);
background: yellow;
color: red;
}
A:active {
cursor: wait;
border: 6pt solid black;
background: red;
color: yellow;
}
Filename: uses_stylesheet.html
<html>
<head>
<link rel="stylesheet" href="stylesheet.css" type="text/css">
<title>The dangers of stylesheets</title>
</head>
<body>
<div class="chapter">
<h1>
The first "Heading 1"
</h1>
<p>The first paragraph.
It goes on a bit. Most of it's rubbish, however.
Wibble. Wibble. Wibble. Wibble. Wibble. Wibble. Wibble.
Wibble. Wibble. Wibble. Wibble. Wibble. Wibble. Wibble.
<span>Some text inside a SPAN.</span>
Wibble. Wibble. Wibble. Wibble. Wibble. Wibble. Wibble.
Wibble. Wibble. Wibble. Wibble. Wibble. Wibble. Wibble.
</p>
<p>This is the second paragraph.
<ol>
some spare text
<p>para inside list</p>
<li>The first entry in an ordered list.
It goes on a bit. Most of it's rubbish, however.
Wibble. Wibble. Wibble. Wibble. Wibble. Wibble. Wibble.
Wibble. Wibble. Wibble. Wibble. Wibble. Wibble. Wibble.
<span>Some text inside a SPAN.</span>
Wibble. Wibble. Wibble. Wibble. Wibble. Wibble. Wibble.
Wibble. Wibble. Wibble. Wibble. Wibble. Wibble. Wibble.
Wibble. Wibble. Wibble. Wibble. Wibble. Wibble. Wibble.
Wibble. Wibble. Wibble. Wibble. Wibble. Wibble. Wibble.
<p>
Wibble. Wibble. Wibble. Wibble. Wibble. Wibble. Wibble.
Wibble. Wibble. Wibble. Wibble. Wibble. Wibble. Wibble.
Wibble. Wibble. Wibble. Wibble. Wibble. Wibble. Wibble.
Wibble. Wibble. Wibble. Wibble. Wibble. Wibble. Wibble.
Wibble. Wibble. Wibble. Wibble. Wibble. Wibble. Wibble.
Wibble. Wibble. Wibble. Wibble. Wibble. Wibble. Wibble.
</p>
Wibble. Wibble. Wibble.</li>
<li>Uh, second one.</li>
<li>Third.</li>
<li>4th.</li>
</ol>
<h1><a name=#here>Some links (this is an H1, too)</a></h1>
<p align="center">Click <a href=#here>this</a> link.</p>
</div>
</body>
</html>