Remove underline from link CSS [ HTML Anchor Problems ]

Remove underline from link CSS [ HTML Anchor Problems ]

Remove underline from link CSS [ HTML Anchor Problems ]

Remove underline from link CSS [ HTML Anchor Problems ]
While working with HTML Link / Anchor tags we face Problems or Styling issues where we want to remove underline from link CSS / HTML. Where using Anchor tags we can Insert Links and Using CSS we can style HTML Elements like Styling Link text.

------------------ Video Contents --------------------
0:00 Introduction
0:17 Remove underline from HTML links
0:23 using inline CSS to remove underline
0:32 using CSS text-decoration:none property
0:44 Changing link Color
1:07 using Internal CSS to remove Underlines
1:43 Removing Underline and Changing Color
1:51 Final Results

in short, By using text-decoration:none; in CSS we can remove the underline from a link.

How to remove underline from link in html
To remove underline from link in html, we have to remove the default text decoration from the HTML Link element.
To do that we can use CSS.
There are different ways to Use CSS with HTML but here we are going to use Inline CSS.

style=“text-decoration:none”

Where this text-decoration:none; property will remove all the Default Text Decorations (line Underline) from our Anchor tag.

a{
text-decoration:none;
}
Removing Text Decoration [Underline] Using External CSS
While using External CSS, you just Have to remember your Anchor Tag (Which is A BTW). Keep in mind, if you are using TAG NAME to style your Link Text/Button. Then this will style all the Links that you have included inside your HTML Document.

a{
text-decoration: none;
}
External CSS – Where we will style our Link using CSS

Underline is Removed but Link Color is Still Blue
By using text-decoration: none; we have Removed the Underline, But for changing Text Color we have to use CSS Color Property for that.
Just write the color and then your Color name like Black.

color: black;
CSS Color Property Syntax

style=“text-decoration:none; color:black;”
using Inline CSS

a{
color: black;
}
by using External CSS

Other use of CSS text-decoration property
In this Tutorial, we have to use text-decoration property to remove the underline from Links. But using this Property we can do so much more.
Like we can Add Overline using text-decoration: overline;



we can add line Trough effect using text-decoration: line-through;
we can add Underlines to any HTML text by using text-decoration: underline;
and two effects like underline and overline both using text-decoration: underline overline; CSS Property.

h1 {
text-decoration: overline;
}

h2 {
text-decoration: line-through;
}

h3 {
text-decoration: underline;
}

h4 {
text-decoration: underline overline;
}
I hope this Tutorial Resolved all of your Queries about Remove underline from link CSS [ HTML Anchor Problems ].
Thanks for watching. Have a Great Time.


Content

0.81 -> hello, guys welcome, in this video tutorial,
2.52 -> we are going to remove underlines from our HTML link text.
6.58 -> So whenever we link any text to another page by default, it comes with this underline
11.53 -> Which is useful in some case but sometimes this underline can affect our
15.45 -> text pattern
17.16 -> so if you want to remove this underline you just need to use CSS
21.949 -> text-decoration:none property
24.359 -> if you have only a few links on your HTML page
27.13 -> then use this inline CSS method
30.249 -> just select the Starting anchor or link tag and write
33.41 -> style="text-decoration:none"
34.61 -> save your HTML file and refresh the browser
40.6 -> We have removed the Underline from our link text
45.21 -> now if we want to change the colour from blue to black
49.17 -> then again go to the starting tag under style add color:black
58.46 -> save it refresh the browser
62.08 -> we have removed the underline and also changed the colour of our linked text
69.409 -> now if you have multiple links on your HTML page
71.979 -> and you want to style them together
74.31 -> then you can use external CSS or by using Internal CSS inside the head tag
83.619 -> write style tags
86.06 -> here you have to write your anchor tag name which is A
91.21 -> this will select all anchor or A tags from this HTML webpage
95.53 -> now add text-decoration: none to remove the underline
107.78 -> and color:black to set link text color to black
110.659 -> thanks for watching this video have a great day

Source: https://www.youtube.com/watch?v=TlXNxvCbDGk