1 Reply Latest reply on Mar 29, 2010 7:42 AM by martcol

    CSS - Multiple Link Colors

    MarkV84

      Hi,

       

      Im really struggling to work this out. Can somebody please tell me how to have multiple link colours and styles in one style sheet please and how to assign the 2 different styles to each link?

       

      I need the links below my navbar to be a different colour to the links inside the navbar. http://www.seemaidstone.co.uk/

       

      Here is my code:

       

      <style type="text/css">

       

      body,td,th {

      font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;

      font-size: 12px;

      text-align: center;

      color: #FFF;

      white-space: normal;

      line-height: 15px;

      font-weight: normal;

      }

      body {

      background-image: url(images/background2.jpg);

      background-attachment: fixed;

      background-repeat: no-repeat;

      background-position: center;

      margin-top: 0px;

      line-height: 0px;

      margin-bottom: 0px;

      font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;

      font-size: 12px;

      text-align: center;

      }

      a {

      font-size: 12px;

      color: #FFFFFF;

      }

      a:active {

      color: #000;

      text-decoration: none;

      }

      a:link {

      color: #FFF;

      text-decoration: none;

      }

      a:hover {

      color: #000;

      text-decoration: none;

      }

      a:visited {

      text-decoration: none;

      color: #FFF;

      }

      body,td,th {

      color: #FFF;

      text-align: center;

      line-height: 15px;

      }

       

      Thanks

        • 1. Re: CSS - Multiple Link Colors
          martcol Level 4

          You need to do a little research on using class and/or id.

           

          You  can name an element in your HTML and target your CSS using those  names.  If you want one unique name that's an id and lots of the same  name that's a class.

           

          So you could name every container  that holds red links and then  <div class="redlinks"> and then use  this:

           

          .redlinks a {

          color: red

          }

           

          Obviously,  it's a bit more conmplicated that that but that I think is the basics.

           

          You  could also target links that you want in your existing page structure.   So if you have a link in the header and your <div> id <div  id="header"> then you use:

           

          #header a {

          color:  red;

          }

           

          Oh, I just noticed you're using tables to  lay out your page.  You apply your class/id to the relevant table  element.

           

          Martin