Web Design with HTML and CSS

184

Working with CSS background images

Web Design with HTML and CSS Digital Classroom

Save the page and then preview it in your browser. By making the heights the same value,

you now have a narrower navbar. By changing the background colors to shades of blue,

you now have colors that are more compatible with the background color of the page.

Unfortunately, the default hyperlink color is also blue, and the rule below the links is not

very attractive. You’ll now change the link color and remove the underline next.

3 Below your #mainnav li rule, add the following rule:

#mainnav ul li a {

color:#ffffff;

text-decoration:none;

}

This rule is necessary because you are targeting hyperlinks inside the mainnav div. The

color and text-decoration properties set the style of these links to white and also

remove the underline. Save the page and preview it in your browser.

Styling the appearance of the hyperlinks by removing the underline and setting the color to white.

This navbar is aesthetically pleasing. You can improve its usability by making the nav

items change color when the user moves the mouse cursor over them and by providing

a visual indicator of which page the user has navigated to. See the next step for

instructions.

4 In your text editor, add the following rule below your #mainnav ul li a rule:

#mainnav ul li a:hover {

background-color:#29336B;

color:#F8F068;

}

The a:hover property is an example of a pseudoclass, which are special properties of

elements (links, in this case) based on user interaction. The a:link property defi nes

the default appearance of a hyperlink before it is fi rst clicked by a user. The a:hover

property defi nes the appearance of a link when a user hovers the mouse cursor over

it (this action is sometimes known as a rollover). The a:visited property defi nes the

appearance of a link on the page after it has been visited. (This helps the user identify

the links she already clicked.) The last pseudo-class is a:active, which defi nes the

appearance of a link when it is being clicked (when the user is pressing down but not

releasing the mouse).

You do not have to create styles for all these properties, but you will often see them in

gr oups of four. To see the a:hover property in action, save your page and preview it in

your browser.