Skip navigation
NeoGen Hawk
Currently Being Moderated

Specify colour for specific link not whole page?

Aug 3, 2012 9:17 AM

Can I specify the colour for specific links on a page that overides the page properties?

 

The words coloured orange throughout the page I would like to make links but as soon as I do they default to the page colour, how do I kkep the original colour and underline them?

 

http://www.nick-lawrence.co.uk/packages.html

 

Many thanks

 

 

 

Nick

 
Replies
  • Currently Being Moderated
    Aug 3, 2012 9:37 AM   in reply to NeoGen Hawk

    Sure.

     

    Change all instances of  <span class="line">Your text here</span> to <a href="LinkHere" class="line">Your text here</a>.

     

    Then modify your .line css to read

    a.line {

              color: #F90;

              text-decoration:none;

              font-family: Arial, Helvetica, sans-serif;

    }

    a.line:hover {

              color: #F90;

              text-decoration:underline

              font-family: Arial, Helvetica, sans-serif;

    }


     
    |
    Mark as:
  • Currently Being Moderated
    Aug 3, 2012 9:36 AM   in reply to NeoGen Hawk

    Use CSS Pseudo-classes - Link States

     

    You need to define a set of link states (link, visited, hover, active) for each ID or class name required.

    Let's say you want to have red links in your #header and white links in your #footer.

     

     

    CSS:

     

    #header a {text-decoration:none}

    #header a:link {color:red}     /**unvisited**/

    #header a:visited {color:gray} /**visited**/

    #header a:hover,               /**on mouse over**/

    #header a:active,              /**on click**/

    #header a:focus                /**on tab key**/

        {text-decoration:underline}

     

     

    #footer a {text-decoration:none}

    #footer a:link {color:white}

    #footer a:visited {color:yellow}

    #footer a:hover,

    #footer a:active,

    #footer a:focus 

        {text-decoration:underline}

     

    HTML:

     

    <div id="header">

    <a href="some-link.html">Link in the header</a> |

    <a href="some-link.html">Link in the header</a> |

    <a href="some-link.html">Link in the header</a> |

    </div>

     

    <div  id="footer">

    <a href="some-link.html">Footer link</a> |

    <a href="some-link.html">Footer link</a> |

    <a href="some-link.html">Footer link</a> |

    </div>

     

    For more on CSS pseudo classes:

    http://www.w3schools.com/css/css_pseudo_classes.asp

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 3, 2012 9:37 AM   in reply to NeoGen Hawk

    Yep, using CSS, it's pretty easy to do.

     

    You can set up a class like this...

     

    table.custom a {

         color:orange;

         text-decoration: none;

    }

     

    This makes any <a> tag within a table with a class="custom" turn orange. You can then set the :hover, :active and :visited per usual.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 3, 2012 9:41 AM   in reply to Jon Fritz II

    the same would go for your div class="content"

     

    div.content a {

         color:orange;

         text-decoration: none;

    }

     

    Will make all of the <a> tags within your <div> with the .content class affecting it go orange automatically once you add them.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points