Links
Links can be styled in multiple ways. Different states of links can have different colors. We can also set background colors to the links. Font family property can also be used to change the font after every state.
Default link styling in CSS:
By default, the links in CSS have the following styling:
- They have an underline
- When hovered over them, the mouse icon changes to the hand icon
- The links are blue if they are not visited
- The links which are visited are purple
- The active links are red
- A focused link gets an outline over it
Additionally, you can style a link differently, based on their states, which are:
- a:link – It is a regular and unvisited link
- a:visited – It is the visited link
- a:hover – The link type when you mouse over it
- a:active – This is the link type the instant when you click it.
Rules while styling the links:
Here are some essential rules for styling the links:
- a:hover must be placed after the a:visited and a:link.
- a:active must be placed after a:hover.
CSS links properties:
Here are some basic CSS properties for styling links:color:
- color: It helps in changing the color of the link text.
- font-family: This property helps change the font type of a given link by using the font-family property.
- Text-Decoration: It is mainly used for adding or removing the underlines from the link text.
- Background-color: It is mainly used for setting the background color for a given link.
Example No.1:
<![CDATA[
<!DOCTYPE html>
<html>
<html lang="en-US">
<style>
a {
color: hotpink;
}
</style>
</head>
<body>
<h1>Knowledge2life</h1>
<p><b><a href="https://knowledge2life.com/" target="_blank">This is a link</a></b></p>
</body>
</html>]]>
OUTPUT:
Example No.2:
<![CDATA[
<html>
<html lang="en-US">
<style>
a:link {
color: red;
}
a:visited {
color: green;
}
a:hover {
color: hotpink;
}
a:active {
color: blue;
}
</style>
</head>
<body>
<h1>Knowledge2life</h1>
<p><b><a href="https://knowledge2life.com" target="_blank">This is a link</a></b></p>
</body>
</html>
]]>
OUTPUT:
