Web Design with HTML and CSS

(National Geographic (Little) Kids) #1

188


Working with CSS background images

Web Design with HTML and CSS Digital Classroom

3 Choose File > Save to save the HTML fi le, and then toggle to you base.css fi le. Locate
the rule you created for the home page and add to it as follows (highlighted in red):
body#home .nav-home, body#aboutus .nav-about {
background-color:#29336B;
color:#F8F068;
}

This appends the new rules for the About Us page (make sure you include the comma
after the .nav-home class). Choose File > Save, and then preview 08_aboutus.html in
your browser.

Setting a unique class for the about page allows you to create distinct styles for it.

Repeat the steps above for the Contact Us page, as instructed below.
4 In your 08_aboutus.html page, choose File > Save As and rename this
fi le 08_contact.html. Scroll to locate the heading 1 content: About Us and change it to
Contact Form.
5 Add an ID to identify this page as the Contact pageby adding the following code to the
body tag (highlighted in red):
<body id= "contact" >

Choose File > Save. Add the necessary rule in your base.css fi le to highlight the Contact
link, as instructed in the next step.
Free download pdf