How to remove the underline for link in html

Question

How to remove the underline from the link? That's my code I try type some code in there, but still not working

@charset "utf-8";
/* CSS Document */
.top {
  color:black;
  font-family:Calibri;
  text-decoration:none;
}

table {

}

<table>
  <tr>
    <td><a href="Home.html"><p class="top">Home</p></a></td>
  </tr>
</table>

score 2 · Answer 1 · answered Oct 04 '16 at 13:39

Your .top class changes the style for the p tag, however it is the a tag that sets the text-decoration, so you will have to specify that or add to your a tag another class and set it's text-decoration attribute.

A possible way:

<table>
  <tr>
    <td>
      <a href="Home.html" class="no-underline">
        <p class="top">Home</p>
      </a>
    </td>
  </tr>
</table>

and

.no-underline {
  text-decoration: none;
}

score 1 · Answer 2 · edited Oct 04 '16 at 13:38

1

You have to set text-decoration: none to the <a> tag itself, not to the <p> which is inside of it.

edited Oct 04 '16 at 13:38

Chris Bier

14,183
17
67
103

answered Oct 04 '16 at 13:37

Marcin Dusza

412
3
10

score 1 · Answer 3 · answered Oct 04 '16 at 13:38

1

Should be this:

a {
  text-decoration: none;
}

answered Oct 04 '16 at 13:38

Nhan

3,595
6
30
38

score 1 · Answer 4 · answered Oct 04 '16 at 13:38

1

You are looking for text-decoration:none

try,

a {
    text-decoration:none;
}

answered Oct 04 '16 at 13:38

Bhavesh G

3,000
4
39
66

score 0 · Answer 5 · answered Oct 04 '16 at 13:39

I replaced .top by the a tag

@charset "utf-8";
/* CSS Document */
a {
    color:black;
    font-family:Calibri;
    text-decoration:none;
}

table {

}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css.css">`enter code here`

</head>

<body>
<table>
    <tr>
        <td><a href="Home.html"><p class="top">Home</p></a></td>
    </tr>
</table>
</body>
</html>

How to remove the underline for link in html

5 Answers5