CSS Style Question - Precedence

CS Discoveries Coding and Debugging Help
1

I have styled the body tag with

text-decoration: underline;

I styled the p tag with

text-decoration: none;

I thought the p rule-set would override the body rule-set. What is my misunderstanding here?

Link to the project or level: [https://codeprojects.org/projects/weblab/6rHZsLkxz4zaBaKtCNfFqw]
What I expect to happen: [I didn’t think the paragraph would be underlined]
What actually happens: [The paragraph is underlined]
What I’ve tried:

2

Make a rule set for the heading and put the underline rule in it.

Take the underline rule out of the body rule set – the body makes it apply to everything.

3

@GordonBrune I undestand that rules in the body rule-set apply to everything, but I thought that conflicting rules would override the body rule.

I have added a color:green; rule to the body rule-set. That makes the heading turn green, but the paragraph is still blue because the color:blueviolet rule in the paragraph rule-set overrides the rule in the body rule-set.

I am not sure why CSS behaves this way.

4

@jwilson, @GordonBrune

You have apparently found an exception to the rule that I didn’t even know about … but … according to css rules (this one being fairly obscure), …

Text decorations are drawn across descendant text elements. This means that if an element specifies a text decoration, then a child element can’t remove the decoration. For example, in the markup <p>This text has <em>some emphasized words</em> in it.</p> , the style rule p { text-decoration: underline; } would cause the entire paragraph to be underlined. The style rule em { text-decoration: none; } would not cause any change; the entire paragraph would still be underlined.

This comes from the official web docs issued by the html5 authors … Why normal precedence doesn’t work with text-decoration is another question … it kind of doesn’t make sense, but it is “the rules”.

Mike

1 Like