index.html
<!DOCTYPE html>
<html>
<head>
<title>Eric’s World of Waffles</title>
<meta charset="utf-8">
<link rel="stylesheet" href="sheet1.css"
media="screen,print">
<style type="text/css">
/* These are my styles! Yay! */
@import url(sheet2.css);
h1 {color: silver;}
</style>
</head>
<body>
<h1>Waffles!</h1>
<p style="color: gray;">The most wonderful of
all breakfast foods is the waffle—a ridged and
cratered slab of home-cooked, fluffy goodness
that makes every child's heart soar with joy.
And they're so easy to make! Just a simple
waffle-maker and some batter, and you're ready
for a morning of aromatic ecstasy!
</p>
</body>
</html>
sheet1.css
body {background: white; font: medium serif;}
h1 {color: blue;}
a:link {color: navy; text-decoration: underline;}
p {margin-left: 5%; margin-right: 10%;}
p:first-line {font-size: 120%; font-weight: bold;
color: black;}
p.footnote {font-size: smaller;}
blockquote {font-style: italic;}
blockquote em {font-style: normal;}
pre, code, tt {color: gray; font-family: monospace;}
sheet2.css
h1 {
font-size: 1.8em;
border-bottom: 1px dotted silver;
}
h1:first-letter {
font-size: 125%;
}
