page1.html

<!DOCTYPE html>
<html>

<head>
<title>Color Swap</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<header>
<h1>Color Swap Page</h1>
<button class="on"><a href="page1.html">Page 1</a></button>
<button><a href="page2.html">Page 2</a></button>
<button><a href="page3.html">Page 3</a></button>
</header>
<article id="pg1">
<ul><li>Each page has teh EXACT same HTML structure.</li>
<li>Only two things are changed on each page.</li>
<li>First, depending on which page you are on, certain buttons will have a <em>class</em> attribute called "on", which tells the button to have a specific style for that page.</li>
<li>Second, depending on which page you are on, there is an id attribute in the article called "pg1" or "pg2" or "pg3".</li>
<li>Notice that there is absolutely NO inline or internal style on any of the HTML pages. ALL of the style is contained in a seperate document called style.css.</li>
</ul>
</article>
</body>

</html>