HTML CSS Exercise: Set style for link, hover, active and visited states of hyperlink

Last update on March 04 2024 06:51:38 (UTC/GMT +8 hours)

Solution:

HTML Code :

<!doctype html<<!-- Document type declaration --<
<html<<!-- Opening HTML tag --<
<head<<!-- Head section containing metadata --<
<title<HTML CSS Exercise - set style for link, hover, active and visited states of hyperlink</title<<!-- Title of the HTML document --<
<style< /* Opening style tag for CSS */
a:link { /* Style for normal, unvisited links */
color: #0e630f; /* Text color for unvisited links */
}
a:hover { /* Style for links on hover */
color: #ec8007; /* Text color for links on hover */
}
a:active { /* Style for active links */
color:#602206; /* Text color for active links */
}
a:visited { /* Style for visited links */
color:#4f628e; /* Text color for visited links */
}
</style<<!-- Closing style tag --<
</head<<!-- Closing head tag --<
<body<<!-- Body section of the HTML document --<
<a href="http://www.example.com"<This is a hyperlink</a<<!-- Anchor element with hyperlink --<
</body<<!-- Closing body tag --<
</html<<!-- Closing HTML tag --<

Explanation:

The HTML document contains a hyperlink styled using CSS.
CSS is used to define different styles for different states of the hyperlink.
a:link sets the style for unvisited links.
a:hover sets the style for links when hovered over by the mouse.
a:active sets the style for links when clicked on.
a:visited sets the style for links that have been visited.
Each state is associated with a different text color to provide visual feedback to the user.

Live Demo :

See the Pen set-style-for-link-hover-active-and-visited-states-of-hyperlink-answer by w3resource (@w3resource) on CodePen.

Supported browser


Yes	Yes	Yes	Yes	Yes