HTML & CSS In Pictures
HTML Basics
Navigation & Layout
Interactivity
Advanced Layout
Create rollover effects
Open
format.css
from the
Travel West
folder.
Copy the formatting for the
topnav
,
navbar
,
navbar li
, and
navbar li a
areas:
#topnav {
background: #cccccc;
width: 100%;
}
#navbar {
background: #cccccc;
float: left;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
}
#navbar li {
display: inline;
}
#navbar li a {
background: #cccccc;
float: left;
padding: 5px 20px;
}
Paste it into
layout.css
in the
Advanced Layout
folder.
Change the
background
colors to black (
#000000
).
In the
navbar li a
formatting, put it in the Arial font, change its color to white, and remove the underlining:
#navbar li a {
background: #cccccc;
float: left;
padding: 5px 20px;
font-family: arial, helvetica, sans serif;
color: #ffffff;
text-decoration: none;
}
<< BACK
NEXT >>