How to Style an HTML Link (Anchor) Tag Using CSS
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.
Do you want to learn HTML to React? 🔥
If yes, then here is our Master HTML to React 📚 In this eBook, you’ll Get Complete Free Hand Written Notes on HTML, CSS, JavaScript, and React 💪. It includes 450 Projects with source code. and 250+ Most Asked Interview Questions
Get your eBook now! 👇
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://www.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://www.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
ADVERTISEMENT
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<br>
<a href="https://www.codewithrandom.com">Click here</a>
</body>
</html>Css Code For Styling Link Like Button
ADVERTISEMENT
a{
text-decoration:none;
color:white;
background-color:royalblue;
padding:16px;
border-radius:5px;
transition:0.3s;
}
a:hover{
background-color:dodgerblue;
}Output…👇
ADVERTISEMENT
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
Thank You!
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!
Written by: @codingporium
How did you wrote with red background "YouTube"?