Boot Camp

QuickLook
Styling Code, Part 2
Rollover Navigation Example
/* ROLLOVER HORIZONTAL NAVIGATION - GREEN */
ul#navigation
{margin-left: 0;
padding-left: .5em;
list-style-type: none;
background-color:#006600;
float: left;
width: 100%;}
ul#navigation li
{display:inline;}
ul#navigation a
{display: block;
float: left;
padding: .2em 1em;
text-decoration: none;
color: #ffffff;
border-right: 1px solid #ffffff;}
ul#navigation a:hover
{background-color: #000000;
color: #cccccc;
font-size:100%;}
CSS Style Rules Order
Creating style sheets is as personal as the designer. However, when you are getting started,
think of ways you can keep your code organized so you can easily see, fix, and change
it. Style the biggest/most encompassing items first, then narrow down to the smallest.
What does this mean?
• First style items that appear throughout your site, over and over, like the body, h1-
h6, p, tables, list starters, and basic links.
• Style sub items next, like table rows, link hover, etc.
211