2 Replies Latest reply on May 26, 2010 1:16 PM by BearHNC

    Adding multiple color links to a page

    BearHNC Level 1

      Hello,

      I am attempting to have 3 different colored links on my page, I have tried to create a pseudo-class but it just is not working, can anyone help?

      Here is my code, am I missing something? I do not have anything set in my page properties. I deleted all the default a:link, a:hover, ect. styles and that did nothing. Can anyone help?

       

       

      /*Here is my pseudo-class*/
      .style7:link {
          color: #FFFFFF;
          font-family: Arial, Helvetica, sans-serif;
          font-size: 24px;
          font-weight: bolder;
          padding-bottom: 25px;
      }

       

      .style7 {color: #FFFFFF}
      -->

      /*Here is where I want to apply it:*/ 

      <p class="style7:link"><a href="#">products</a>   <a href="#">what's new</a></span></p>
        <!-- end #header --></div>

        • 1. Re: Adding multiple color links to a page
          Nancy OShea Adobe Community Professional & MVP

          You need to define a set of link states (link, visted, 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 {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.
          Alt-Web   Design & Publishing
          Web | Graphics | Print | Media  Specialists
          http://alt-web.com/
          http://twitter.com/altweb
          http://alt-web.blogspot.com