Why Use CSS for a Nav Bar

  • Cascading Style Sheets will give your site's Navigation a consistent look and feel.
  • Cascading Style Sheets allow for very quick and easy updates of the entire site's Navigation look
  • Cascading Style Sheets can reduces the overall code size for each page
  • Cascading Style Sheets allow you to make Nav buttons out of text. Text will load much, much faster than rollover buttons.
  • If you want to add a new Nav item, you do not have to make a new rollover image. All you have to do is to copy one line of code and add the appropriate text.
  • To the left are Buttons made with a Cascading Stlye sheet
  • Below a regular hyperlink not defined by the .Nav in the CSS:
    www.MSN.com
  • For an excellent interactive CSS demo with sample code see:
    www.w3schools.com/css/css_examples.asp

Below is the html code used to
load the CSS file for this page

<head>
<title>Nice CSS Navigation Demo</title>
<link href="CSS_Nav_Demo.css" rel="stylesheet" type="text/css" />
</head>.

Below is part of the code used to
create these CSS Nav buttons by
modifying the Anchor tag.

All anchors in the <div class="Nav"> (like the Home and Resume) links will now display with a 100px block style.

/* The .Nav class below makes buttons. The . creates a customized Class called Nav which modifies the a (anchor) tag */
/* You must put in the Nav class in div tag to separate your button links from the rest of the links on the site.*/
.Nav a {
display:block;
padding:4px;
text-decoration:none; /* Do not underline Nav hyperlinks */
width:100px;
margin:1px;
color:#003366;
font-family:"Trebuchet MS", Verdana, Arial, sans-serif;
font-weight:bold;
border:8px outset #CCEAFF;
background-color: #65A7ED;
}

/* Makes the button dark when you hover or rollover it */
.Nav a:focus,.Nav a:hover {
border:8px outset #003366;
color:#C7EAFB;
background-color: #003366;
}

Below is the html code used to
call this CSS for the Navigation section.
It works along with the a { code above.

(Just add <a href="abc.htm">abc</a> to add a new css button.)

<div class="Nav">
<h3>Navigation Links</h3>
<a href="index.htm">Home</a>
<a href="Resume.htm">Resume</a>

Below is the css code used to
modify the <h2> for this line.

h2 {
font-size: 18px;
background-image:url(images/Point.gif);
background-repeat:no-repeat;
text-align:center;
}