CSS : Applying CSS to your web page

CSS Pseudo Classes


You must have seen in certain websites that as you move your cursor from one link go the other , the color of the link at which you are hovering changes or a pointer points to that link . This effect is achieved as :

        #nav1 a:hover {
         
           background: url(images/b.gif) no-repeat left center;
         
           color: #118877;
        
          }

So, as you hover over a particular link , the icon b.gif points to that link and the color changes to #118877 .
:hover is called a dynamic pseudo-class as it changes properties of objects in real time .


Another way to differentiate between current link that user is viewing and the other links is to place a cursor over the current link :


#nav1 .icon a, #nav1 .icon a:hover, #nav1 .icon a:active {
          background: url(images/b.gif) no-repeat left center;
          color: #FFF;
          cursor: default;
        }




Let's add some of the links to our web pages within the division "welcome" as :



        <div id="welcome">
           <h1>Welcome to Movies Freak!</h1>
           <p>We are a group of movies freak who watch some insane number of movies round the clock .If you are new to our blog the begin from
              <a href="index.html">Home</a> . This is the list of our <a href="recently-reviewed.html">Latest</a> reviewed movies . These are the
              <a href="highly-recommended.html">Greatest</a> movies we have ever reviewed . We'll review each and every movie for you so that you
              can find out which one is for you to watch .Know more<a href="about.html">About Us</a> here .</p>
        </div>

How can a user know which of these pages he has already visited and which he's yet to visit ? Styling schemes are used for this purpose .

        <style type="text/css">
         html, body {
                margin: 0;
                padding: 0;
                border: none;
                background: white;
              }
          body {
             color: #800080;
             font-family:"Times New Roman", sans-serif,Verdana;
             font-size: 75%;
           }
        a:link {
           color: #112233;
           }
        a:visited {
           color: #223344;
           }
        a:hover {
           color: #334455;
           }
        a:active {
           color: #556677;
          }

a:visited - dynamic pseudo class for links already visited .Color changes to #223344 .

a:active - link at which we are currently positioned .Color changes to #556677 .