Web Design with HTML and CSS

(National Geographic (Little) Kids) #1

186


Working with CSS background images

Web Design with HTML and CSS Digital Classroom

7 In your HTML, scroll up to locate the <body> tag, and add the following code
(highlighted in red):
<body id="home">

By adding an ID to the body tag, you can set a style that applies to this page only. In this
case, the style is for the appearance of the Home link on this page.
8 In your style sheet, add the following rule:
body#home .nav-home {
background-color:#29336B;
color:#F8F068;
display:block;
}

This rule targets the class nav-home on the page with the ID “home.” Now save your
page and preview it in your browser.

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

Notice that the Home link is permanently set to the same style as the hover eff ect.
You can style it completely diff erently, for example, by choosing diff erent values for the
background color and color properties.
You will now add another page to your site and then style the navigation accordingly.
Free download pdf