CSS remove hyperlink style
Disabling Hyperlink Styles with CSS
Hyperlinks are very common elements in web design, allowing users to jump to other pages or perform specific actions. Hyperlinks typically have default styling, such as blue text with an underline. However, sometimes we want to disable the default styling of a hyperlink, making it look like normal text. This article will explain how to disable hyperlink styling using CSS.
1. Use the text-decoration property to disable underlining.
In CSS, we can use the text-decoration property to control text decoration, including underlining. To disable the underline of a hyperlink, set the text-decoration property to none.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cancel Link Style</title>
<style>
a {
text-decoration: none;
}
</style>
</head>
<body>
Geek Docs
</body>
</html>
Output:
In the example above, we use CSS to unlink the underline. Clicking the link will not cause the underline to appear.
2. Using the color property to change the link color
In addition to unlinking, sometimes we also want to change the color of the hyperlink to make it stand out from normal text. We can use the color property to set the color of the hyperlink.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Change Link Color</title>
<style>
a {
text-decoration: none;
color: red;
}
</style>
</head>
<body>
Geek Docs
</body>
</html>
Output:
In the example above, we set the color of the hyperlink to red. Clicking the link will turn the text red.
3. Using the :hover pseudo-class to modify link styles
When you hover over a hyperlink, you can use the :hover pseudo-class to modify the link’s style, such as changing its color or adding an underline.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hover Link Style</title>
<style>
a {
text-decoration: none;
color: blue;
}
a:hover {
text-decoration: underline;
color: green;
}
</style>
</head>
<body>
Geek Docs
</body>
</html>
Output:
In the example above, when you hover over the link, the text turns green and becomes underlined.
4. Use the :focus Pseudo-Class to Modify Link Styles
Similar to the :hover pseudo-class, the :focus pseudo-class modifies the style of a link when it has focus. This is very useful for keyboard navigation.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Focus Link Style</title>
<style>
a {
text-decoration: none;
color: blue;
}
a:focus {
text-decoration: underline;
color: orange;
}
</style>
</head>
<body>
Geek Docs
</body>
</html>
Output:
In the example above, when a link receives focus, the text turns orange and becomes underlined.
5. Use the :visited pseudo-class to modify the style of visited links
:visited pseudo-class can be used to modify the style of links that a user has visited, so that users can clearly identify which links they have visited.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Visited Link Style</title>
<style>
a {
text-decoration: none;
color: blue;
}
a:visited {
text-decoration: underline;
color: purple;
}
</style>
</head>
<body>
Geek Docs
</body>
</html>
Output:
In the example above, after a user visits the link, the text will turn purple and be underlined.
6. Use the !important Keyword to Override Default Styles
Sometimes a webpage’s default styles may override your own styles. In these cases, you can use the !important keyword to override the default styles.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Override Default Style</title>
<style>
a {
text-decoration: none !important;
color: red !important;
}
</style>
</head>
<body>
Geek Docs
</body>
</html>
Output:
In the example above, we use the !important keyword to forcefully remove the underline and set the color to red.
7. Using the display property to modify link display
In addition to modifying the color and underline, we can also use the display property to change the display of links, such as displaying them as block-level elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Display Link as Block</title>
<style>
a {
text-decoration: none;
color: blue;
display: block;
margin-bottom: 10px;
}
</style>
</head>
<body>
Geek Docs
Geek Docs
</body>
</html>
Output:
In the example above, we display the link as a block-level element and add some spacing.
8. Add a Background Color Using the background Property
In addition to modifying the text style, we can also use the background property to add a background color to make the link stand out more.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Background Color for Link</title>
<style>
a {
text-decoration: none;
color: white;
background: blue;
padding: 5px 10px;
}
</style>
</head>
<body>
Geek Docs
</body>
</html>
Output:
In the example above, we added a blue background color and white text color to the link.
9. Adding a Border Using the Border Property
If you want the link to stand out more, you can use the border property to add a border.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Border for Link</title>
<style>
a {
text-decoration: none;
color: blue;
border: 1px solid blue;
padding: 5px 10px;
}
</style>
</head>
<body>
Geek Docs
</body>
</html>
Output:
In the example above, we added a blue border to the link.
10. Use the text-transform property to change text case
Sometimes we want to change the case of the text in a link. We can use
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Transform for Link</title>
<style>
a {
text-decoration: none;
color: blue;
text-transform: uppercase;
}
</style>
</head>
<body>
Geek Docs
</body>
</html>
In the above example, we convert the link text to uppercase.
11. Use the font-weight property to change text weight.
If you want to change the weight of the link text, you can use the font-weight property.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Font Weight for Link</title>
<style>
a {
text-decoration: none;
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
Geek Docs
</body>
</html>
In the example above, we set the link text to be bold.
12. Use the text-align property to change text alignment.
If you want to change the alignment of a link’s text, you can use the text-align property.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Align for Link</title>
<style>
a {
text-decoration: none;
color: blue;
text-align: center;
}
</style>
</head>
<body>
Geek Docs
</body>
</html>
In the example above, we centered the link’s text.
13. Use the line-height property to change the line height
If you want to change the line height of a link, you can use the line-height property to set it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Line Height for Link</title>
<style>
a {
text-decoration: none;
color: blue;
line-height: 2;
}
</style>
</head>
<body>
Geek Docs
</body>
</html>
In the example above, we set the line height of the link to double its original value.
14. Use the text-shadow property to add a text shadow
If you want to add a shadow effect to the linked text, you can use the text-shadow property.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Shadow for Link</title>
<style>
a {
text-decoration: none;
color: blue;
text-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
Geek Docs
</body>
</html>
In the example above, we added a shadow effect to the linked text.
15. Use the text-overflow property to truncate text
If the text of a link is too long, you can use the text-overflow property to truncate the text and display an ellipsis.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Overflow for Link</title>
<style>
a {
text-decoration: none;
color: blue;
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
Geek Docs Geek Docs Geek Docs
</body>
</html>
In the example above, we truncate the linked text and display an ellipsis.
16. Use the cursor property to modify cursor styles
If you want a link to display a different cursor style when the mouse hovers over it, you can use the cursor property to set it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cursor for Link</title>
<style>
a {
text-decoration: none;
color: blue;
cursor: pointer;
}
</style>
</head>
<body>
Geek Docs
</body>
</html>
In the example above, when the mouse hovers over the link, the cursor changes to a hand.
17. Use the transition property to add transition effects
If you want a smooth transition effect when a link changes state, you can use the transition property to set it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Transition for Link</title>
<style>
a {
text-decoration: none;
color: blue;
transition: color 0.3s;
}
a:hover {
color: red;
}
</style>
</head>
<body>
Geek Docs
</body>
</html>
In the example above, when the mouse hovers over the link, the color transitions for 0.3 seconds.
18. Use the transform property to add transformation effects
If you want a link to transform when its state changes, you can use the transform property to set it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Transform for Link</title>
<style>
a {
text-decoration: none;
color: blue;
transition: transform 0.3s;
}
a:hover {
transform: scale(1.2);
}
</style>
</head>
<body>
Geek Docs
</body>
</html>
In the example above, when the mouse hovers over the link, it zooms in 1.2x.
19. Use the opacity property to change transparency
If you want the link’s transparency to change when its state changes, you can use the opacity property to set it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Opacity for Link</title>
<style>
a {
text-decoration: none;
color: blue;
transition: opacity 0.3s;
}
a:hover {
opacity: 0.5;
}
</style>
</head>
<body>
Geek Docs
</body>
</html>
In the example above, when the mouse hovers over the link, the link’s opacity changes to 0.5.
20. Use the outline property to add an outline effect
If you want a link to have an outline effect when it receives focus, you can use the outline property to set it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Outline for Link</title>
<style>
a {
text-decoration: none;
color: blue;
}
a:focus {
outline: 2px solid red;
}
</style>
</head>
<body>
Geek Docs
</body>
</html>
In the example above, when the link is focused, a red outline effect appears.