A vertical navigation bar part 2 - A Smarter Way To Learn HTML & CSS (2015)

A Smarter Way To Learn HTML & CSS(2015)

70
A vertical navigation bar
part 2

In the last chapter, we started constructing a navigation bar. We created an unordered list, made the list items clickable, and removed the bullets. Now let’s style the anchors. The style will apply to all anchors that are list items in an unordered list in the div with an id of “navbar.”

div#navbar ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.1em;
font-weight: 900;
}

Now we have this.

Since it’s a navigation bar, we can assume that the user knows it’s clickable. We don’t need the underline to communicate that the text items are links. So…

div#navbar ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.1em;
font-weight: 900;
text-decoration: none;
}

This is the result.

We’ll continue constructing the navigation bar in the next chapter.

In your CSS file, make the anchors bigger, bolder, and sans-serif. Take away the underlines. Save the file. Display the page.

Sample CSS code is at:
http://asmarterwaytolearn.com/htmlcss/practice-70-1.html.

Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/70.html