In this tutorial we will show you the solution of css remove underline from link, as we know css used to style html elements, here we need to remove default style from a html <a> anchor element.
When we have to remove particular style from an element first we need to identify which style from block of default styles then we sets it value to either ‘none’ or ‘0’.
So we can remove any style from html elements.
Step By Step Guide On CSS Remove Underline From Link :-
We can implement styles using three types (i.e inline,external or internal) Internal means we have to define our style within <style> tag in head block and inline means we have use style within element definition, external means we defined our css at separate file with .css extension we have to import by <link> tag within head block.
Here we used internal style method and in our program we defined one <a> anchor tag with empty link (i.e ‘href’ attribute had no path information) so when we click that link we can’t move another location.
As we know every <a> anchor element must had blue color and underlined because those are default style to that element.
So here we have to remove ‘text-decoration’ style property to ‘underline’ from anchor tag.
<!DOCTYPE html>
<html>
<head>
<title>REMOVE UNDERLINE FROM LINK</title>
<style>
a{
text-decoration: none;
}
</style>
</head>
<body>
<a href="#">link</a>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is containing information about webpage and if you need any external file those links are declared here. <title> tag is used for set the webpage title.
- When we have to remove any default style from an html element we don’t have access for that but we can sets those style property value to ‘none’ or ‘0’. When we sets those two value to any property we can avoid those styles.
- So here we defined internal style to style <a> anchor element. For remove underline from anchor tag we sets ‘text-decoration’ property to ‘none’. By using this we avoided underline style from our link anchor tag.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- Here <a> tag we defined with name ‘link’ and we don’t need to move another location using this link so we sets it attribute ‘href’ to ‘#’ and we successfully removed default underline style by as we seen at point 5.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion we are able to know how to remove underline from a link using css.
In html always anchor tag had two default property (i.e) its color sets to ‘blue’ and its text-decoration value ‘underline’.
For remove any default style we had only one option we can change that particular style property value to make either ‘none’ or ‘0’ and we can’t remove any default style from html element.
So we modified anchor default style then we achieved result easily.
I hope this tutorial on css remove underline from link helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
