Hiding Hands-on Exercises

1. Open existing page template
2. Create a titlebar style
   
   #titlebar {
width: 612px;
height: 40px;
background-image: url(titlebar.gif) no-repeat scroll;
}
   
   
3. Delete the page header graphic
4. Set the attribute on the <td> tag where the graphic used to be as id="titlebar"
5. Type in "Department of History" into the <td> you just named titlebar. You'll notice the text you type appears over top the graphic. This is expected and is not the way it looks when viewed in the browser.
6. Create a style for <h1> headers inside titlebar to hide the text
   
   #titlebar h1 {
display: none;
}


7. Set the text you typed in step 5 to be <h1>
8. Save and preview in browser
9. Shift + F12 to preview in Firefox. Control + Shift + S to toggle off the style sheet in Firefox.