freeCodeCamp Challenge Guide: Override Styles in Subsequent CSS

Override Styles in Subsequent CSS


Problem Explanation

The most important bit to remember when wanting to Override Styles in Subsequent CSS is the order the classes are created.

The last updated style will take precedent over the previously written classes.

For example:

<style>
  body {
    color: purple;
  }
  .red-text {
    color: red;
  }
  .blue-text {
    color: blue;
  {
</style>

Now, when you create any text in the body, it will have the text color purple assigned to it.

To begin experimenting with the override process, you can now add the "red-text" class to see the results.

Using the format above, the text below will override the previously purple font color with red.

<h1 class="red-text">Example</h1>

When you want to add several classes, you can use this format:

<h1 class="class-name1 class-name2 class-name3">Example</h1>

You can now add the last class created above ("blue-text") to the same example above to see the results.

<h1 class="red-text blue-text">Example</h1>

This will automatically pick the last class created in your styles section, which in this case was "blue-text".

Even if you apply the 1st class red-text behind the 2nd class blue-text, the override process will pick the last created class. In this case, that class is the blue-text.

So, for example:

<h1 class="blue-text red-text">Example</h1>

This will still display a blue font color because of the ordering in the styles section.

The blue-text class was created last, torwards of the bottom (</style>).

10 Likes

For some reason it’s not working.

body { background-color: black; font-family: Monospace; color: green; } .pink-text { color: pink; } .blue-text { color: blue; }

Hello World!

1 Like

Yes I did the <h1 class "pink-text “blue-text”

2 Likes

pink-text and blue-text should be inside the same quotation.

h1 class=“pink text blue text”

17 Likes

Thank you so much!!!

1 Like

Hello Everyone,
The correct is…

7 Likes

.pink-text {
color: pink;
}

.blue-text {
color: blue;
}

Hello World!

never mind I see it now i'm missing my - between blue and text thanks anyways
1 Like