# CSS Style Question - Precedence

**URL:** <https://forum.code.org/t/css-style-question-precedence/40043>\
**Category:** Coding and Debugging Help\
**Tags:** csd-unit-2\
**Created:** [October 31, 2024, 5:47pm UTC](https://forum.code.org/t/css-style-question-precedence/40043 "2024-10-31T17:47:04Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![jwilson25](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/jwilson25/32/8000_2.png) [@jwilson25](https://forum.code.org/u/jwilson25)\
**Post date:** [October 31, 2024, 5:47pm UTC](https://forum.code.org/t/css-style-question-precedence/40043/1 "2024-10-31T17:47:04Z")

</div>

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](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:**

---

<div class="post-metadata">

**Author:** ![GordonBrune](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/gordonbrune/32/4752_2.png) [@GordonBrune](https://forum.code.org/u/GordonBrune)\
**Post date:** [October 31, 2024, 6:23pm UTC](https://forum.code.org/t/css-style-question-precedence/40043/2 "2024-10-31T18:23:41Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jwilson25](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/jwilson25/32/8000_2.png) [@jwilson25](https://forum.code.org/u/jwilson25)\
**Post date:** [November 4, 2024, 6:32pm UTC](https://forum.code.org/t/css-style-question-precedence/40043/3 "2024-11-04T18:32:57Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![mwood](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/mwood/32/4941_2.png) [@mwood](https://forum.code.org/u/mwood)\
**Post date:** [November 4, 2024, 9:38pm UTC](https://forum.code.org/t/css-style-question-precedence/40043/4 "2024-11-04T21:38:57Z")

</div>

@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](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration) … 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