CODEWITHSUNDEEP
css
user319854
user319854

Reputation: 4106

css and underline

Why is the link using the underline?

<html>
<head>
<style type="text/css">
body{
  text-decoration: underline;
}
#text{
  text-decoration: none;
}
</style>
</head>
<body>
Text text text <br/>
<div id = "text">
  <a href="#">link</a>
</div>
</body>
</html>

Upvotes: 3

Views: 437

Answers (4)

Topera
Topera

Reputation: 12389

Because this is the default (user agent css have this rule, to apply underline in every tag a). The default isn't inherit, so even if parent tag has underline, the child won't get it.

EDIT 1:

For example, firefox have this rule:

*|*:-moz-any-link {
    text-decoration:underline;
}

Default would be:

*|*:-moz-any-link {
    text-decoration:inherit;
}

Then, in your example, the tag a would inherit div text-decoration.

EDIT 2:

You can overwrite default behavior with:

a {
    text-decoration: inherit;
}

Upvotes: 3

MrVimes
MrVimes

Reputation: 3312

I think you want to replace this...

#text{ text-decoration: none; }

with this...

#text a:link{ text-decoration:none; }

this tells the rule to apply to all anchors that are children of the tag who's id is 'text'

Upvotes: 1

zildjohn01
zildjohn01

Reputation: 11515

It's included in the default browser CSS. It's just as if this was included prior to your style tag:

a{
    text-decoration: underline;
}

Sure, the link also matches #text, but since a is more specific, it wins. Any attributes not explicitly specified by the browser's a (such as font-size) will be inherited.

Upvotes: 0

BrunoLM
BrunoLM

Reputation: 100312

It's the default behavior of the a tag. It doesn't match the #text style.

Upvotes: 2

Related Questions