Ahmadullah Nikzad's Blog

Styling anchor link with CSS

Ahmadullah Nikzad's photo
Ahmadullah Nikzad
·

2 min read

In the name of Allah the most merciful and the most gracious

When I've started learning CSS I've faced many issues in CSS and I could not solve those issues after a long time and studying and watching tutorials and searching for useful websites to learn CSS as a professional fortunately I've succeeded and realized the secrets of CSS. Now if you are a beginner and want to learn CSS like me I recommend you to read this blog about styling anchor link with CSS which is a very cool and informative tutorial. So let's started! As we know anchor tags or links are inline tags which means they just occupy their place not more.

block.png

As you see in the above picture shows three different tags

  1. inline tag
  2. inline-block tag
  3. block tag

At default anchor, tags are inline tag which occupies their own place not whole the line but block tag occupies the whole line as you saw in the above picture and the middle one is the inline-block tag which is in the middle and has the characteristics of block tag and inline tag.

For more information refer to: w3schools.com

for styling inline tags we use 

display:inline-block;

Remember this technique. display:inline-block overwrite the default display and converts it into inline-block.

Inline tags do not accept padding and margin. Styling anchor tag

HTML Part
<a href='link'>Click Here</a>
CSS Part
a{
display:inline-block;
color:#fff;
text-decoraction:none;
background-color:blue;
padding:10px;
margin:10px;
}

Here is the result

button.png

CSS3