Question

I am very new to programming, especially with html/css. Any tips are welcome.

I am trying to add a hyperlink to the header on each page of my website.

The issue I am facing is when I turn the header into a hyperlink using <a href “”> I no longer am able to style the header. Interestingly the font style and size remains the same but it is underlined and becomes purple when it has been previously clicked.

I tried using a div class =”header” instead of just using and then styling class header but still doesn’t seem to work. Tried adding Important! after the text-decoration = none:

I’m sure I am just missing something very basic but I can’t quite figure it out.

Any help is appreciated many thanks !

CSS code

 {
    margin: 0;
    padding: 0;
  }

.header a {
    text-decoration: none important!;
}
h1 {
    text-decoration: none;
    text-align: center;
    font-size: 600% ;
    font-style: itaic;
    background: #33ACFF ;
    min-width: 100%;
    margin: 0%;
    padding: 0%;
    color: black;

}

/* top nav bar style and location */
.navbar ul {
    list-style-type: none;
    padding: 0%;
    margin: 0%;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 3px solid black;
}

/* top nav bar options styli */
.navbar a {
    color: black;
    text-decoration: none;
    padding: 10px;
    font-family: sans-serif;
    text-transform: uppercase;
   
}

.navbar a:hover,
.navbar .active {
  background-color: black;
  color: white;
}

.navbar li {
  display: inline;
}

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="css.css" />
    <script src="website.js" defer></script>
    <title> Why So Serious </title>
</head>

<body>
    <div class="header">
        <h1><span> <a href= "index.html" >Why So Serious</a></span></h1>
    </div>
    <nav class="navbar">
        <ul>
            <li><a href="goodnews.html" id="goodnews" class="nav-link">Goodnews</a></li>
            <li><a href="sport.html" id="sport" class="nav-link">Sport</a></li>
            <li><a href="style.html" id="style" class="nav-link">Style</a></li>
            <li><a href="forum.html" id="forum" class="nav-link">Forum</a></li>
        </ul>
    </nav>
</body>

</html>

Can’t remove underline and purple font on header hyperlink

LEAVE A COMMENT Hủy