Adding More Nav Bar CSS Rules

Go to your styles.css file, and add the following new properties to your nav ul selector.

border-style: solid;
border-color: CHANGE_TO_VALUE_FROM_W3SCHOOLS;
border-width: 2px;
padding: 10px;

Change the CHANGE_TO_VALUE_FROM_W3SCHOOLS to any color from this list.

Try changing some of the properties. See what happens? Specifically change around border-width and padding to different amounts of pixels.

Removing the Underline From The Nav Bar

The blue underline for the links is unprofessional, and doesn't show up on real websites. Let's go ahead and remove it.

Task:

Add a new rule to your stylesheet with the selector of nav ul li a. This way it, targets specifically the anchor elements in our nav bar. Within this new rule, add the text-decoration property with a value of none. It should look something like below:

nav ul li a {
    text-decoration: none;
}

Do the link underlines go away? Ask your mentor for help if it isn't working.

Last updated