How to Style an HTML Link (Anchor) Tag Using CSS
Ā
Anchor Tag HTML-:
Hey friends, today I’ll teach you how to style anchor links with CSS. As you saw in the title, you probably know that today I will show how to style anchor tags. However, we can’t do this if you don’t know what the anchor tag is. So let’s first see what is an anchor tag in simple terms.
An anchor tag is basically a link tag. It’s called an anchor tag because of its function. For example, a ship’s anchor links the sea and ship while an Html anchor links two pages together.
Do check out the post on the anchor tag in this blogĀ here.
Why Should we Style it?
You might be confused about why we should style anchor tags and what we can do with them. The default anchor link is a blue link that is underlined. However, we can change that from default underlined blue links to anything possible with CSS’s power.
Basics
Let’s get started with the basics. We will see how to remove the underline and change its color first.
In simple terms, we are going to style the links in CSS. We first add the tag as a selector, and inside it, we style it with CSS properties. Check out how to style some common problems below:
a) Remove underline Html formĀ anchor linksĀ
Html code For anchor links
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<a href="https://codewithrandom.com">Click here</a>
</body>
</html>Css Code For Remove underline
a{
text-decoration:none;
}Output…š
Portfolio Website using HTML and CSS (Source Code)
b) Change the color from anchor links
Html code For anchor links
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<a href="https://codewithrandom.com">Click here</a>
</body>
</html>Css Code For changing the color from anchor links
body {
font-family: "Lato", Helvetica, sans-serif;
font-weight: 100;
color: white;
font-size: 1.5em;
}
a{
text-decoration:none;
color:mediumseagreen;
}Create A Travel Website Using HTML & CSS
Output…š
Now you know the simple everyday basics of styling links. Now to make this even more remarkable, I will make this link look like a cool button.
Styling Links to Look Like Buttons
Check out the code example below on how I used CSS properties like padding, background color, and more to style the links.
Html code For anchor links
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<br>
<a href="https://codewithrandom.com">Click here</a>
</body>
</html>Css Code For Styling Link Like Button
a{
text-decoration:none;
color:white;
background-color:royalblue;
padding:16px;
border-radius:5px;
transition:0.3s;
}
a:hover{
background-color:dodgerblue;
}Output…š
ADVERTISEMENT
And that’s it! You have successfully learned how to style HTML Links from beginner level to advanced level.
ADVERTISEMENT
50+ HTML, CSS & JavaScript Projects With Source Code
ADVERTISEMENT
Thank You!
ADVERTISEMENT
comment down below any doubts or suggestions you have.Ā I hope this post wasĀ helpful, and thanks to Code With Random for giving me the chance to write here, and IĀ hope to see you all in future posts. Goodbye!
ADVERTISEMENT
Written by: @codingporium
How did you wrote with red background "YouTube"?