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 use of a pseudo-class
![simple.jpg]()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Anchor</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="Untitled_1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="top_nav">
<ul>
<li>
<a href="file://MCNSERVER2/UserProfiles/vchoudhary/Desktop/exsercise9/default.html">HOME</a></li>
<li>
<a href="file://MCNSERVER2/UserProfiles/vchoudhary/Desktop/exsercise9/default.html">NEWS</a></li>
<li>
<a href="file://MCNSERVER2/UserProfiles/vchoudhary/Desktop/exsercise9/default.html">ARTICLE</a></li>
<li>
<a href="file://MCNSERVER2/UserProfiles/vchoudhary/Desktop/exsercise9/default.html">BLOGS</a></li>
<li>
<a href="file://MCNSERVER2/UserProfiles/vchoudhary/Desktop/exsercise9/default.html">ABOUT</a></li>
</ul>
</div>
</body>
</html>
CSS code
#top_nav {
min-width: 600px;
height: 40px;
background-color: lime ;
padding: 15px 5px 5px 25px;
}
#top_nav ul li{
display: inline;
}
Using a Pseudo-Class
- The color of the text changes when you hover the mouse over the link.
a:hover {
color: gray ;
}
![hover.jpg]()
- The color of the of text background changes when you hover the mouse over the link.
a:hover {
color: gray ; background-color: maroon ;
}
![background.jpg]()
- Pseudo-class with Text-decoration. The text becomes underlined when you hover the mouse over the link.
a:link{
text-decoration: none ;
}
a:hover {
text-decoration: underline ;
color: gray ;
}
![underline.jpg]()
Complete CSS code
/* CSS layout */
#top_nav {
min-width: 600px;
height: 40px;
background-color: lime ;
padding: 15px 5px 5px 25px;
}
#top_nav ul li{
display: inline;
}
/*Pseudo-Class*/
a:link{
text-decoration: none ;
}
a:hover {
text-decoration: underline ;color: gray ;
}
Without use of the :focus Pseudo-class
HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Focus</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="Untitled_1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page_content" >
<form name="firs_last">
FIRST NAME:<input type="text" name="fname" size="15"/><br/><br/>
LAST NAME:<input type="text" name="lname" size="15"/><br/><br/>
<input type="submit" value="submit"/>
</form>
</div>
</body>
</html>
CSS Code
#page_content{
min-width: 600px;
height: 500px;
}
![pfocus.jpg]()
Using the :focus Pseudo-class
CSS Code
#page_content{
min-width: 600px;
height: 500px;
}
#page_content input:focus{
background-color: orange ;
}
![pwfocus.jpg]()