A link is a clickable element that connects different web pages. For example,
The above example shows the default link and a link with CSS style.
Create a Link
A link is created using the <a> element. For example,
<a href="#">Default Link</a>
Browser Output
The above example shows the default link that doesn't look good without any styles.
Note: By default, links are in blue text with
underlining. When clicked or in the active state, the link color turns
red, and visited links have purple text.
CSS text-decoration Property
The text-decoration property is used to remove the default
underlines from links. For example,
a {
text-decoration: none;
}
Browser Output
text-decoration: none
Default Link
Here, the text-decoration property removes the default
underline from the link.
Note: The text-decoration property accepts
values such as none, underline,
overline, line-through, and blink to
control various text decoration styles or remove them.
Style a Link
We can use different CSS properties to style our link. For example,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS link styling</title>
</head>
<body>
<a href="#">Click here</a>
</body>
</html>
a {
text-decoration: none;
padding: 10px 20px;
border-radius: 8px;
font-family: Monospace;
text-align: center;
color: white;
background-color: purple;
}
Browser Output
In the above example,
text-decoration: noneremoves the underline from linkpadding: 10px 30pxadds padding to the link-
border-radius: 8px.rounds the link borders by8px -
font-family: Monospacedefines the font family of the button text text-align: centeraligns the text in the centercolor: whitesets the text color towhite-
background-color: blueadds apurplecolor to link background
Style Link States
Links can be styled differently based on their states using the following pseudo-classes.
:link: default and unvisited link:visited: link visited by user:hover: link with mouse over it:focus: link that is currently focused:active: link that has just been clicked
Let's see an example,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Link States</title>
</head>
<body>
<p>Link having default state styles.</p>
<a href="#">Default Link State</a>
<p>Link having updated state styles.</p>
<a href="#" class="new">Styled Link State</a>
</body>
</html>
/* styles the default link*/
a.new:link {
color: green;
}
/* styles the unvisited link */
a.new:visited {
color: green;
}
/* styles the link on being hovered */
a.new:hover {
color: blue;
}
/* styles the link while clicked */
a.new:active {
color: red;
}
Browser Output
Link having default state styles.
Default Link StateLink having updated state styles.
Styled Link StateIn the above example,
a:linkunvisited link hasgreencolora:hoverlink hasbluecolor on hovera:visitedvisited link hasgreencolora:activelink hasredcolor when clicked
Note: The link states must be in this specific order
:link, :visited, :focus,
:hover and :active for proper CSS stylings.
Style Link as Button
Links can also be styled as a button. For example,
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Links as Button</title>
</head>
<body>
<a class="first-link" href="#">Submit</a>
<a class="second-link" href="#">Delete</a>
</body>
</html>
a {
text-decoration: none;
border: 1px solid black;
border-radius: 5px;
font-weight: bold;
font-size: 18px;
font-family: "Courier New", Courier, monospace;
color: white;
padding: 10px;
margin-left: 10px;
margin: 20px;
text-align: center;
cursor: pointer;
}
a.first-link {
background-color: green;
}
a.second-link {
background-color: red;
}
a.first-link:hover {
background-color: blue;
}
a.second-link:hover {
background-color: purple;
}
a:active {
color: rgba(255, 255, 255, 0.4);
}
Browser Output
The above example shows the link as a button.
Style Image as Link
We can style an image as the link. For example,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Image Link</title>
<body>
<p>Menu Items</p>
<ul>
<li>Tea</li>
<li>Coffee</li>
<li>Soup</li>
</ul>
<p>
Read our full menu here: <br>
<a href="#"><img src="https://cdn-icons-png.flaticon.com/512/4813/4813075.png" alt=""></a>
</p>
</body>
</html>
img {
max-width: 80px;
border: 2px solid;
background-color: aliceblue;
}
a:hover {
color: blue;
}
Browser Output
Styling Image as a Link
Menu Items
- Tea
- Coffee
- Soup
Read our full menu here:
In this way, we can style the image as a link.
Cursor Property
The cursor property is used to add different cursors in our
links such as pointer, help, wait,
etc. For example,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Cursors</title>
</head>
<body>
<p>You can have additional information from <a href="#">here</a>.</p>
</body>
</html>
a:hover {
cursor: help;
}
Browser Output
You can have additional information from here .
In this way, we can change the cursor of the link when it is being hovered.
Creating Navigation Bar
Let's use different link properties to create a navigation bar,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Navigation</title>
</head>
<body>
<h2>Navigation Bar</h2>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</body>
</html>
/* common styles for all links */
a {
font-size: 18px;
text-decoration: none;
padding: 8px 12px;
margin-right: 12px;
border: 1px solid black;
border-radius: 5px;
transition: all 0.3s ease;
background-color: purple;
color: white;
}
/* styles links while mouse is hovered over */
a:hover {
background-color: orange;
}
/* styles links while being clicked */
a:active {
color: blue;
}
Browser Output