5 Replies Latest reply: Aug 3, 2012 10:08 AM by NeoGen Hawk RSS

    Specify colour for specific link not whole page?

    NeoGen Hawk Community Member

      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

        • 1. Re: Specify colour for specific link not whole page?
          Rik Ramsay Community Member

          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;

          }


          • 2. Re: Specify colour for specific link not whole page?
            Nancy O. CommunityMVP

            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.

            • 3. Re: Specify colour for specific link not whole page?
              Jon Fritz II CommunityMVP

              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.

              • 4. Re: Specify colour for specific link not whole page?
                Jon Fritz II CommunityMVP

                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.

                • 5. Re: Specify colour for specific link not whole page?
                  NeoGen Hawk Community Member

                  All sorted, thanks guys.

                   

                  Regards

                   

                   

                   

                  Nick