Multiple Link Styles/Colors for Multiple Sections.

How do I apply different color styles to a different set of links such as a specific color links in the nav and a different color link for the footer?

Confused...

I know that each section will have to have a - class?

 

Well there's a few methods of doing this but yeah you can use classes. For example if the HTML is as follows:

<div id = "navBar">
  <a href = "index.php">Home</a>
  <a href = "aboutUs.php">About Us</a>
  <a href = "contactUs.php">Contact Us</a>
</div>

<div id = "footer">
  <a href = "privacyPolicy.php">Privacy Policy</a> | 
  <a href = "advertise.php">Advertise</a>
</div>

HTML:

What you can do is add classes to the links so that you end up with this:

<div id = "navBar">
  <a href = "index.php" class = "navLink">Home</a>
  <a href = "aboutUs.php" class = "navLink">About Us</a>
  <a href = "contactUs.php" class = "navLink">Contact Us</a>
</div>

<div id = "footer">
  <a href = "privacyPolicy.php" class = "footerLink">Privacy Policy</a> | 
  <a href = "advertise.php" class = "footerLink">Advertise</a>
</div>

HTML:

Then you can define the looks in the CSS. When coding the CSS make sure classes have a "." before it's name, IDs on the other hand should be preceded by a "#":

#navBar{
  background: #c0c0c0 url('images/navBG.png') repeat-x;
  width:250px;
  padding:25px;
}
#footer{
  width:920px;
  padding:20px;
}
.navLink{
  color:#FF0000;
  font-weight:bold;
}
.footerLink{
  color:#FFFFFF;
  font-size:10px;
  text-decoration:none;
}

Code (markup):

However a slightly more compact way would be to define the links' appearance like this. Let's first look at the HTML code again, I'm going to take out all the class attributes:

<div id = "navBar">
  <a href = "index.php">Home</a>
  <a href = "aboutUs.php">About Us</a>
  <a href = "contactUs.php">Contact Us</a>
</div>

<div id = "footer">
  <a href = "privacyPolicy.php">Privacy Policy</a> | 
  <a href = "advertise.php">Advertise</a>
</div>

HTML:

Then you can define the appearance of the links like this:

#navBar{
  background: #c0c0c0 url('images/navBG.png') repeat-x;
  width:250px;
  padding:25px;
}
#navBar a{
  color:#FF0000;
  font-weight:bold;
}
#footer{
  width:920px;
  padding:20px;
}
#footer a{
  color:#FFFFFF;
  font-size:10px;
  text-decoration:none;
}

Code (markup):

This CSS code basically says, "If there are any links in the element with this ID, then apply the following format on it". So the code "#navBar a{ blah blah }", makes any links within the DIV with the ID "navBar" red and bold.

If you want to learn more about CSS then you should read this.

Hope that helped anyway, I'm sure you'll pick it up quickly.


Hodge

 

Awesome! Thank you. I had somewhat of an idea but this just put it into a easy to understand tut.

Rep added.
Cheers
Mike.

 

Glad it was helpful