CSS : Applying CSS to your web page

Pointing to current page


To point to the page that the user is currently accessing we take any small icon image and place it in images folder with the name b.jpg .To state at which list element should the icon be placed we create a class "icon" set by default at the home page .



         <div id="header">
           <h2><a href="index.html">Movies Freak</a> </h2>
           <ul id="nav1">
              <li class="icon"><a href="index.html">Home</a></li>
              <li><a href="recently-reviewed.html">Latest</a></li>
              <li><a href="highly-recommended.html">Greatest</a></li>
              <li><a href="about.html">About Us</a></li>
           </ul>
        </div>

Adding background image of the icon to the selected list :


        #nav1 a {
          color: #800080;
          font: bold 1em  Verdana, sans-serif;
          display: block;
          padding: 35px 0 35px 0;
         }

       #nav1 .icon a {
           background: url(images/b.jpg) no-repeat left center;
           }


In case this overlaps with the list element provide  padding to the list :

e.g.

        #nav1 a {
          color: #800080;
          font: bold 1em  Verdana, sans-serif;
          display: block;
          padding: 35px 0 35px 0;
         }

provide padding :

         #nav1 a {
          color: #800080;
          font: bold 1em  Verdana, sans-serif;
          display: block;
          padding: 35px 0 35px 20px;
         }