Styles to Hyperlink in CSS - with Example

Zia

1 Follower

Jun 16, 2024

1 sec read

177

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>

<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>

<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