Post
Ask Question

Using CSS Pseudo-Class

Introduction

 
In this article, you will learn how to use a CSS Pseudo-class with Text-decoration on Navigation Bars. CSS Pseudo-classes are used to add special effects to some selectors. 
 
Anchor Pseudo-Classes list
 
Parameter Description
a:link{ } Unvisited link.
a:hover{ } Mouse over link.
a:visited{ } Visited link
a:active{ } Selective link
 
Without the use of a pseudo-class
 
simple.jpg
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <title>Anchor</title>  
  5. <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />  
  6. <link href="Untitled_1.css" rel="stylesheet" type="text/css" />  
  7. </head>  
  8. <body>  
  9.   <div id="top_nav">  
  10. <ul>  
  11.     <li>  
  12.         <a href="file://MCNSERVER2/UserProfiles/vchoudhary/Desktop/exsercise9/default.html">HOME</a></li>  
  13.         <li>  
  14.         <a href="file://MCNSERVER2/UserProfiles/vchoudhary/Desktop/exsercise9/default.html">NEWS</a></li>  
  15.         <li>  
  16.         <a href="file://MCNSERVER2/UserProfiles/vchoudhary/Desktop/exsercise9/default.html">ARTICLE</a></li>  
  17.         <li>  
  18.         <a href="file://MCNSERVER2/UserProfiles/vchoudhary/Desktop/exsercise9/default.html">BLOGS</a></li>  
  19.         <li>  
  20.         <a href="file://MCNSERVER2/UserProfiles/vchoudhary/Desktop/exsercise9/default.html">ABOUT</a></li>  
  21. </ul>  
  22. </div>  
  23. </body>  
  24. </html>  
  25. CSS code  
  26. #top_nav {  
  27. min-width: 600px;  
  28. height: 40px;  
  29. background-color: lime ;  
  30. padding: 15px 5px 5px 25px;  
  31. }  
  32. #top_nav ul li{  
  33.        display: inline;  
  34. } 
Using a Pseudo-Class
  • The color of the text changes when you hover the mouse over the link.
    1. a:hover {    
    2.         color: gray ;    
    3. }  
hover.jpg
  • The color of the text background changes when you hover the mouse over the link.
    1. a:hover {  
    2.        color: gray ; background-color: maroon ;  
    3. } 
background.jpg
  • Pseudo-class with Text-decoration. The text becomes underlined when you hover the mouse over the link.
    1. a:link{        
    2.       text-decoration: none ;  
    3. }  
    4. a:hover {  
    5.        text-decoration: underline ;  
    6.        color: gray ;  
    7. } 
underline.jpg
 
Complete CSS code
  1. /* CSS layout */  
  2. #top_nav {  
  3. min-width: 600px;  
  4. height: 40px;  
  5. background-color: lime ;  
  6. padding: 15px 5px 5px 25px;  
  7. }  
  8. #top_nav ul li{  
  9.        display: inline;  
  10. }  
  11. /*Pseudo-Class*/  
  12.   
  13. a:link{  
  14.        text-decoration: none ;  
  15. }  
  16. a:hover {  
  17.        text-decoration: underline ;color: gray ;  
  18. }  
  19. Without use of the :focus Pseudo-class  
  20. HTML code  
  21. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  22. <html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">  
  23. <head>  
  24. <title>Focus</title>  
  25. <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />  
  26. <link href="Untitled_1.css" rel="stylesheet" type="text/css" />  
  27. </head>  
  28. <body>  
  29. <div id="page_content" >  
  30.     <form name="firs_last">  
  31.     FIRST NAME:<input type="text" name="fname" size="15"/><br/><br/>  
  32.     LAST NAME:<input type="text" name="lname" size="15"/><br/><br/>  
  33.     <input type="submit" value="submit"/>  
  34.     </form>  
  35. </div>  
  36. </body>  
  37. </html> 
CSS Code
  1. #page_content{  
  2.         min-width: 600px;  
  3.         height: 500px;  
  4. } 
pfocus.jpg
 

Using the: focus Pseudo-class

 
CSS Code
  1. #page_content{  
  2.         min-width: 600px;  
  3.         height: 500px;  
  4. }  
  5. #page_content input:focus{  
  6.        background-color: orange ;  
  7. } 
pwfocus.jpg
 


Similar Articles