1 Reply Latest reply: Sep 11, 2013 9:26 PM by Ben Pleysier RSS

    How can I make a link a different color than the other links according to the current page?

    Noradc Community Member

      Hello.  I have created a navigation bar.  And I would like to style the links to have the current page link a different color than the other links.  For example, if all of the links have a black background, I would like to have the current page link to have a white background.  The reason that I would like to style them this way is so that the visitor knows what page is being visitied.

       

      I tried different ways but all of them did not show to make any change to the links.  This is what I have so far.  The links work, but all of them have the same color and background.  When on the home page, I would like to have the home page link to have a white background with black letters.  I would appreciate your advice.

       

      <head>

       

      ul {
          list-style-type: none;
          text-align: right;
          padding-top: 10px;
          padding-bottom: 6px;
          padding-right: 10px;
         
         
             
      }

       

      li {
          display: inline;
      }

       


      a:link {
         
          color: #FFF;
          background-color: #000;
          text-align: center;
          padding-top: 8px;
          padding-right: 8px;
          padding-bottom: 8px;
          padding-left: 7px;
          text-decoration: none;
         
         
      }

       

       
      a:visited {
          color: #FFF;
          background-color: #000;
          text-decoration: none;
                 
      }

       


      a:hover {
          color: #000;
          background-color: #FFF;
          text-decoration: none;   
      }

       

      a:active {
          color: #FFF;
          background-color: #000;
          text-decoration: none;   
      }

       

       

       

      a.menu:link {
           color: #000   

           background-color: #FFF;

           text-decoration: none;
             
      }

       

      </head>

       

       

      <body>

       

      <div class="navigation">
          <ul>
              <li class="menu"><a href="index.html" target="_self">HOME</a></li>

       

      </body>

       

       

       

       

      Thank you very much.