Class Specifi Hyperlink Styles
Specific styling can be assigned to a specific type of hyperlink. This is achieved by creating
the style rules in the CSS. For this type of hyperlink styling, a class is used generally than an
id. A point to note that an id can only be used once on a page whereas a class can be used
multiple ties as required.
This link will use the style rule class of navone even if it is placed inside a div that has div
specific hyperlink style rules.
the style rules in the CSS. For this type of hyperlink styling, a class is used generally than an
id. A point to note that an id can only be used once on a page whereas a class can be used
multiple ties as required.
Code snippet displays the use of CSS and HTML fie containing a hyperlink with the
value of class set to navone.
value of class set to navone.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8”>
<style>
.navone:link {
text-decoration: underline;
color: #FFF;
background: #008;
font-size:30px;
}
.navone:visited {
text-decoration: none;
color: #FFF;
background: #06a;
}
.navone:hover {
text-decoration: none;
color: #FFF;
background: #000;
}
.navone:focus {
text-decoration: none;
color: #FFF;
background: #06b;
}
.navone:active {
text-decoration: underline;
color: #FFF;background: #06F;
}
</style>
</head>
<body>
<a href=”6.html” class=”navone”>LinkText</a>
</body>
</html>
<html lang=”en”>
<head>
<meta charset=”utf-8”>
<style>
.navone:link {
text-decoration: underline;
color: #FFF;
background: #008;
font-size:30px;
}
.navone:visited {
text-decoration: none;
color: #FFF;
background: #06a;
}
.navone:hover {
text-decoration: none;
color: #FFF;
background: #000;
}
.navone:focus {
text-decoration: none;
color: #FFF;
background: #06b;
}
.navone:active {
text-decoration: underline;
color: #FFF;background: #06F;
}
</style>
</head>
<body>
<a href=”6.html” class=”navone”>LinkText</a>
</body>
</html>
specific hyperlink style rules.
Figure shows output of a class specific hyperlink.
.png)
