Sun. Jul 3rd, 2022

How to remove underlines in html links

In the tutorial on how to create an html link, an underline will appear on the link. 

in this tutorial we will try to remove it. 

by default the link display will appear in some browsers as follows. 

 link not visited 
when the link has not been visited it is blue and underlined 

visited link 
if the link has been visited it is purple and underlined

 active link
the active link is red and underlined, to see the display press the link while holding down 
the mouse inside the link it will change its color to red.

the above color is default and haven't changed the html link color with CS

how to get rid of underscore in html link which is displayed by browser by default?
there are two ways to change it, with inline style and internal style using css

remove underscore links with inline style
add a style attribute in the link tag, such as <a style=””></a>, 
then add a css code that serves to tell the link not to be underlined, namely
text-decoration:none and it will look like the code below
<a style="text-decoration:none" href="https://rrcomindo.com"> website </a>
website
the links that are underlined by default are now gone like this image

remove underscore links with internal style

if in the first tutorial using an inline style that mixes html and css.
how to separate internal style between html and css
<!DOCTYPE html>
<html>
<head>
        <title> remove all underscores ( underline ) </title>
        <style>
                .link-website {
                      text-decoration: none;
                }
        </style>
</head>
<body>
        <p>
               <a href=”https://rrcomindo.com“> default link </a>
      </p>
       <p>
               <a style=”text-decoration:none” href=”https://rrcomindo.com“> website </a>
      </p>
       <p>
               <a class=”link-website” href=”https://rrcomindo.com“> website </a>
      </p>
</body>
</html>
Result

default link
website
website

the code above will remove the link if you add the link-website class to the html, 
if you want to remove all links without adding the class as follows.
<!DOCTYPE html>
<html>
<head>
<title> remove all underscores ( underline ) </title>
      <style>
             a {
                  text-decoration: none;
                }
     </style>
</head>
<body>
<p>
             <a href=”https://rrcomindo.com“> default link </a>
    </p>
     <p>
            <a style=”text-decoration:none” href=”https://rrcomindo.com“> website </a>
   </p>
    <p>
           <a class=”link-website” href=”https://rrcomindo.com“> website </a>
   </p>
</body>
</html>
Result

default link
website
website

default link which by default will be underlined without adding a class, 
and the link-website class can be deleted

although it is possible to remove the underline in html links,
it is recommended to display the underline.

because it helps everyone who visits the website more easily understand 
and distinguish between url links and non-links.
 


 
 

 


    

 

See also  Corel Draw 2021

Leave a Reply

Your email address will not be published.