Html link style | Styling Html anchor links

Html link style | Styling Html anchor links 

html link style | styling html anchor links


Hey friends, today I'll teach how to style anchor links with CSS. Before we dive in, I'll introduce myself. I'm CodingPorium, and I make coding tutorials and provide Free Source Code. Do check out my YouTube channel here or by searching for CodingPorium on YouTube for more!


Anchor Tag HTML

Like 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 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 colour 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 



b) Change colour from anchor links


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 Cool

Check out the code example below on how I used CSS properties like padding, background colour and more to style the links.




And that's it! You have successfully learnt how to style HTML Links from beginner level to advanced level.


Thank You!


Do contact me at codingporium.blogspot.com/p/contact.html or comment down below any doubts or suggestions you have. Also, do subscribe to my YouTube channel and do follow me on Instagram. 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

Post a Comment

Previous Post Next Post