Html Question posted in
Some basic documentation can be found here.

Html – Can't remove underline and purple font on header hyperlink

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>
Tags:

2

Answers


  1. 0 
     {
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;
    }

    h1{
    background:transparent;
    font-size:15px;
    border-bottom:0;
    }

    h1 a{
    text-decoration:none;
    }

    https://jsfiddle.net/es10knot/4/

    check out the fiddle this should solve the issues you are having, it involves on the styling of the parent of the a tag check out the css on the fiddle for better understanding.

    Login or Signup to reply.
  2. 0

    To style links you need to target the <a> element itself, not its parent <h1>.

    This rule will set every link in your document to inherit the color of its parent, overriding the default blue/purple color which browsers apply by default:

    a {
  color: inherit;
}

    This rule will remove the underline from any links in a <header> element:

    header a {
  text-decoration: none;
}

    A working snippet based on your code to demonstrate the solution:

    a {
  color: inherit;
}

header {
  background: #33ACFF ;
}

header h1 {
  text-align: center;
  font-size: 600%;
  font-style: italic;
  margin: 0%;
}

header a {
  text-decoration: none;
}

nav {
  text-align: center;
  padding: 10px;
  border-bottom: 3px solid black;
}

nav a {
  text-decoration: none;
  padding: 10px;
  font-family: sans-serif;
  text-transform: uppercase;
}

nav a:hover, nav .active {
  background-color: black;
  color: white;
}
    <header>
  <h1><a href="index.html">Why So Serious</a></h1>
</header>
<nav>
  <a href="goodnews.html" id="goodnews" class="nav-link">Goodnews</a>
  <a href="sport.html" id="sport" class="nav-link">Sport</a>
  <a href="style.html" id="style" class="nav-link">Style</a>
  <a href="forum.html" id="forum" class="nav-link">Forum</a>
</nav>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search