Member Avatar for davecoventry

I have a link in my web page:

         <div class="site-logo">
           <h1 class="site-title">
             <a href="http://10.0.0.201/wp/" title="Document &amp; Draft" rel="home">Document &amp; Draft</a>
           </h1>
           <h2 class="site-description">For power CAD users</h2>
         </div>

The "site-logo" class is as follows:

.site-logo{
  display: block;
  text-align: left;
  color: #9FA32E;
  font-family: "Trebuchet MS",Arial,Helvetica,Sans-Serif;
  font-size: 42px;
  text-decoration: none;
}

I'm expecting the text in the link to be 42px high, coloured #9FA32E and without the underline that normally denotes a link.

The text is indeed 42 pixels high, but it's coloured the deep purple of a visited link and it has an underline beneath it.

Firebug doesn't tell me where the override is occurring.

The <a href> anchor is obviously what's causing the override as when I remove the anchor the text is displayed as expected.

The CSS for the "a" is as follows:

a {
    color: royalblue;
}
a:visited {
    color: purple;
}
a:hover,
a:focus,
a:active {
    color: midnightblue;
}

How can I make sure that the "a" anchor doesn't override my "site-logo" class?

  • 3 Contributors
  • 5 Replies
  • 869 Views
  • 18 Hours Discussion Span
  • Latest Post Latest Post by JorgeM

Recommended Answers

All 5 Replies

Member Avatar for patk570

Try this:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
    .site-logo{
    display: block;
    text-align: left;
    color: #9FA32E;
    font-family: "Trebuchet MS",Arial,Helvetica,Sans-Serif;
    font-size: 42px;
    }
    a {
    color: royalblue;
    text-decoration: none;
    }
    a:visited {
    color: purple;
    text-decoration: none;
    }
    a:hover,
    a:focus,
    a:active {
    color: midnightblue;
    text-decoration: none;
    }
</style>
</head>

<body>
     <div class="site-logo">
    <h1 class="site-title">
    <a href="http://10.0.0.201/wp/" title="Document &amp; Draft" rel="home">Document &amp; Draft</a>
    </h1>
    <h2 class="site-description">For power CAD users</h2>
    </div>
</body>
</html>
Member Avatar for JorgeM

If you change your style sheet selector to reflect a targetted element, then the user agent style wont override.

 .site-logo a{
  display: block;
  text-align: left;
  color: #9FA32E;
  font-family: "Trebuchet MS",Arial,Helvetica,Sans-Serif;
  font-size: 42px;
  text-decoration: none;
}

You see the problem with your current selector is targetted at the element with the class called "site-logo". that element is the div. If you target the anchor element within the div as with .site-logo a { .. } that will prevent the user-agent style from taking precedence.

Styles are applied in a certain order of precendence.

Member Avatar for davecoventry

Perfect!

Thanks Jorge!

I knew it was something like that, I just couldn't get the syntax.

Many thanks.

Dave

Member Avatar for JorgeM

glad you resolved this issue.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.