What Takes Precedence in CSS?

HTML-CSS
1

Basic CSS: Prioritize One Style Over Another

<style>
  body {
    background-color: black;
    font-family: monospace;
    color: green;
  }
  .pink-text  {
    color: pink
  }
</style>
<h1 class="pink-text">Hello World!</h1>

I am not getting a pass on this assignment because - Your <style> should have a pink-text CSS class that changes the color . - Well my style does have the pink-text CSS and Hello World changes to pink so I guess that “class” takes precedence over “body”. Still, I can’t understand the reason for my not passing this lesson.

2

Hi ttibsen!

Seems like there is just a semicolon missing!

Have a good day!

3

You’re right - adding the semi-colon at the end did the trick and I got the pass. But strictly speaking, the semi-colon in this case is unnecessary since there’s only a single attribute being applied. Of course, if we had 4 you would need semi-colons after the first three (but not the last). I guess the moral of the story is that - for the purposes of these lessons, form is paramount. Anyway, thanks for your help - it got me the pass that I wanted.

4

That is why your browser was actually changing the color of the text anyway!

It’s still a good habit to be formal… and elegant :slight_smile:

5

A dictum I will heed from hereon!