Conversation


Your input fuels progress! Share your tips or experiences on prioritizing mental wellness at work. Let's inspire change together!

Join the discussion and share your insights now!

Comments 0


advertisement

Styles to Hyperlink in CSS - with Example

styles to hyperlink in css


Styles of Hyperlink

CSS can be used to change the appearance and behavior of hyperlinks. To do this, use the following selectors/pseudo-classes:

  • a
  • a:link
  • a:visited
  • a:hover
  • a:active

These selectors/pseudo classes represent the 'anchor' element (specified using the HTML 'a' tag) and its various states.

There are two other ways to assign hyperlink styles. They are as follows:

  • Div specific
  • Link to specific


1. ID Specific Hyperlink Styles

A hyperlink style can be created and assigned to a specific div. This will have all the hyperlinks present within the div following the specified rules. It is irrelevant if the div is an (#) ID or (.) class.

<!DOCTYPE html>
<html lang="en">
<head>
 meta charset="utf-8">
<style>
#navone a:link {
text-decoration: underline;
color: #005;
background: transparent;
}
#navone a:visited {
text-decoration: none:
color: #FFA500:
background: transparent:
}
#navone a:hover {
text-decoration: none
color: #FFAS00;
background: transparent:
}
#navone a:focus{
text-decoration: none:
color: #FFA500;
background: transparent:
}
#navone a:active {
text-decoration: none
color: #FFA500;
background: transparent:
}
</style>
</head>
<body>
 <a href="#" id="navone">Click me</a>
</body>
</html>



2. Class-Specific Hyperlink Styles

Specific styling can be assigned to a specific type of hyperlink. This is achieved by creating style rules in CSS. For this type of hyperlink styling, a class is used generally rather than an ID. A point to note is that an ID can only be used once on a page whereas a class can be used multiple times as required.

<!DOCTYPE html>
<html lang="en">
<head>
 meta charset="utf-8">
<style>
.navone a:link {
text-decoration: underline;
color: #005;
background: transparent;
}
.navone a:visited {
text-decoration: none:
color: #FFA500:
background: transparent:
}
.navone a:hover {
text-decoration: none
color: #FFAS00;
background: transparent:
}
.navone a:focus{
text-decoration: nOne:
color: #FFA500;
background: transparent:
}
.navone a:active {
text-decoration: none
color: #FFA500;
background: transparent:
}
</style>
</head>
<body>
 <a href="#" class="navone">Click me</a>
</body>
</html>


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.


CSS Styles to hyperlink style hyperlink in css hyperlink styling in css link style in css css links hyperlink in css css link in html id specific hyperlink styles class specific hyperlink styles

advertisement


Profile Image

Published by: 

1 Follower

Zia

Web Developer | App Developer | Freelancer | Blogger