Reputation: 5454

CSS Help with Anchor Tag

<html>
<head> 
<style type="text/css">
 a{
    color: #753C52;
    font-weight:bold;
    font-size:11px;
    text-decoration:none;
    border: solid 1px yellow;
  }

.viewInBrowserLinkStyle {
    color: #666666;
    font-size: 20px;
    line-height: 14px;
    border: solid 1px red;
    text-decoration:underlined;
 }
</style>
</head>
<body>

<a href="http://www.w3schools.com" class="viewInBrowserLinkStyle ">
This is a link</a>

</body>
</html>

I am able to override every property other than "text-decoration"! Why is it so ? How can i override the text-decoration that is defined in anchor tag with the one that is defined in the class?

Please advice!

Upvotes: 0

Answers (5)

Newton Calegari

Reputation: 41

You wrote wrong the attribute, it's text-decoration: underline, not underlined. If still you don't uses, I recommend to you use debug tools, it's more easy to identify these problems and erros.

This link shows some CSS debug tools: http://designshack.co.uk/articles/css/html-and-css-debugging-tools

Upvotes: 0

sarcastyx

Reputation: 2219

To fix this you need to change your stylesheet a little. So instead of .viewInBrowserLinkStyle you should use a.viewInBrowserLinkStyle. Then it will work. This is because you are globally specifying all anchor tags to not be underlined. And to override that you need to specify any anchor tag with that classname needs to have an underline.

Upvotes: 0