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%; }