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
- <!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 ;
- }
- The color of the text background changes when you hover the mouse over the link.
- a:hover {
- color: gray ; background-color: maroon ;
- }
- 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 ;
- }
-
- #top_nav {
- min-width: 600px;
- height: 40px;
- background-color: lime ;
- padding: 15px 5px 5px 25px;
- }
- #top_nav ul li{
- display: inline;
- }
-
-
- 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;
- }
Using the: focus Pseudo-class
CSS Code
- #page_content{
- min-width: 600px;
- height: 500px;
- }
- #page_content input:focus{
- background-color: orange ;
- }