Styling The Navigation Menu

Now I'm sure you noticed that the navigation menu doesn't look very trick. Remember that lists and their items are block level items meaning that they all get their own new line. Also remember that by default browsers add bullets or numbers to lists depending on if they are un-ordered or ordered lists. Lets see if we can get our menu to run horizontally across the page with no bullets and get rid of those underlines on the links.

/* push the nav element down a bit */ 
#navigation { 
  margin-top : 15px; 
} 

/* align all elements in the mainNav UL to the center */ 
#mainNav { 
  text-align : center; 
} 

/* get rid of bullets, display on same line and space it out a bit */ 
#mainNav li { 
  list-style-type : none; 
  display : inline; 
  padding : 0 4px; 
} 

/* make links inside mainNavs li's white and remove link underline */ 
#mainNav li a { 
  color : #fff; 
  text-decoration : none; 
}

First we adding a 15 pixel margin to the top of the div element (with id "navigation") that holds our unordered list (with id "mainNav"). We then defined that everything inside the list should have its text centered. After that we said we wanted all items of our list to not have a bullet (by using list-style-type = none), told the browser to display the list items "inline" (instead of block) and gave them some space with 4 pixels of padding on the right and left and none top/bottom. You could also use margin to get the space on the "li" elements. The end result would be the same.

Note: Thinking of a box, margin is added to the area around the outside of the box border, padding is added around the inside of the border of the box.

Finally we defined that all links (a - anchor tags) within line elements (li) within the element with the id of "mainNav" should have a text color of white (#fff) and that there should be no text decoration, therefore removing the underline.

Save the CSS file and reload your Browser.

Tutorial Image

Not a bad improvement huh? With just a handful of CSS rules applied we have changed the look of our site completely. If your site doesn't look any different, make sure the "styles.css" file is inside the CSS folder which is in the same project folder as your HTML files. Also make sure your link to the CSS file in the HTML head element is correct.

Lets finish out our styles for the general site layout and then create the rest of your sites pages.

#contentWrapper { 
  padding : 0 5px; 
  min-height : 350px; 
} 

#contentWrapper h2 { 
  color : #009; 
  text-transform : capitalize; 
} 

#contentWrapper p { 
  margin-bottom : 5px; 
  text-indent : 1em; 
}

Here we take our "contentWrapper" element, pad the right and left edges 5 pixels and define that it should be at least 350 pixels tall with the "min-height" property. If you have enough content it will grow larger than that, but this will keep your page from being really short if there isn't enough content, completely optional.

We then define that all "h2" elements (second largest heading) within our "contentWrapper" element be the same blue color we used for our "headerWrapper" background. We also want the first letter of each word in that heading to be capitalized regardless of how the HTML is written. For this we use the text-transform property with a value of capitalize.

Next we add some margin to the bottom of our paragraphs and indent the text of each paragraph by 1 "em". Em's are another unit of measurement like pixels. 1 em is equivalent to the with of 1 letter "M" in the font that is being used. Since we are indenting text, I figured we would throw that in there as the measurement.

 

The final thing we are going to style is the bottom or footer of our site. Lets give it the same background color as our header, align the text right,white in color and add a little padding.

This is what your complete CSS file should look like at this point.

* { 
  padding : 0; 
  margin : 0; 
} 

body { 
  background-color : #ddf; /* could also be defined #ddddff */ 
  font-family : arial; 
} 

#mainWrapper { 
  width : 800px; 
  margin : 0 auto; 
  background : #fff; 
} 

#headerWrapper { 
  padding : 5px 5px 0 5px; 
  margin-bottom : 15px; 
  background : #009; /* Dark Blue */ 
  border-bottom : 2px solid #099; 
} 

#siteTitle h1 { 
  color : #f90; 
  font-family : verdana, arial; 
  font-variant : small-caps; 
} 

#navigation { 
  margin-top : 15px; 
} 

#mainNav { 
  text-align : center; 
} 

#mainNav li { 
  list-style-type : none; 
  display : inline; 
  padding : 0 4px;
} 

#mainNav li a { 
  color : #fff; 
  text-decoration : none; 
} 

#contentWrapper { 
  padding : 0 5px; 
  min-height : 350px; 
} 

#contentWrapper h2 { 
  color : #009; 
  text-transform : capitalize; 
} 

#contentWrapper p { 
  margin-bottom : 5px; 
  text-indent : 1em; 
} 

#footerWrapper { 
  background : #009; 
  padding : 1px 5px 0px 5px; 
  color : #fff; 
  text-align : right; 
}

For more CSS properties and possible values check out our CSS properties list.