Member Avatar for davecoventry

I have a link in my web page:

         <div class="site-logo">
           <h1 class="site-title">
             <a href="" 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
  • 1K Views
  • 18 Hours Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

Short summary and practical tips.

The problem was not a browser bug but the cascade: the color and underline came from rules that actually target the anchor element, while the class in the original post was applied to the containing div. As noted, the correct approach is to give the link itself the intended styles (and include the different link states if needed) so the anchor’s own rules do not win by being more specific for that element.

Quick troubleshooting checklist:

  • Use the browser inspector, open the Styles and Computed panes, and look for the rule that sets the color or text-decoration (overridden properties show as crossed out). Clicking the rule in DevTools jumps to its source file.
  • Remember specificity and cascade: element selectors are weakest, class selectors are stronger, ids stronger still; pseudo-classes (like link states) count like classes. If two selectors have equal specificity, the one later in the CSS wins.
  • If a global stylesheet (or a framework) defines link styles later in the cascade, place the site-logo link styles after it or increase selector specificity. Avoid relying on !important except as a last resort.

Practical notes and accessibility:

  • If removing the underline for visual reasons, keep a clear focus style for keyboard users (outline, background change, or color contrast) so links remain accessible.
  • Fix any malformed HTML (the original post’s href looked corrupted) — invalid markup can also produce odd render results.

Credit: solution suggested by ; ’s fiddle demonstrates the effect.

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="" 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.