Override Styles in Subsequent CSS – freeCodeCamp Solutions

Create an additional CSS class called blue-text that gives an element the color blue. Make sure it’s below your pink-text class declaration.

Apply the blue-text class to your h1 element in addition to your pink-text class, and let’s see which one wins.

Applying multiple class attributes to a HTML element is done with a space between them like this:

class="class1 class2"

Note: It doesn’t matter which order the classes are listed in the HTML element.

However, the order of the class declarations in the <style> section is what is important. The second declaration will always take precedence over the first. Because .blue-text is declared second, it overrides the attributes of .pink-text

<style>
  body {
    background-color: black;
    font-family: monospace;
    color: green;
  }
  .pink-text {
    color: pink;
  }

  .blue-text {
    color: blue;
  }
</style>
<h1 class="pink-text blue-text">Hello World!</h1>

Next task: Override Class Declarations by Styling ID Attributes

Give your h1 element the id attribute of orange-text. Remember, id styles look like this:

<h1 id="orange-text">

Leave the blue-text and pink-text classes on your h1 element.

Create a CSS declaration for your orange-text id in your style element. Here’s an example of what this looks like:

#brown-text {
  color: brown;
}

Note: It doesn’t matter whether you declare this CSS above or below pink-text class, since the id attribute will always take precedence.

<style>
  body {
    background-color: black;
    font-family: monospace;
    color: green;
  }
  .pink-text {
    color: pink;
  }
  .blue-text {
    color: blue;
  }

  #orange-text {
    color: orange;
  }
</style>
<h1 class="pink-text blue-text" id="orange-text">Hello World!</h1>

Next task: Override Class Declarations with Inline Styles

Use an inline style to try to make our h1 element white. Remember, inline styles look like this:

<h1 style="color: green;">

Leave the blue-text and pink-text classes on your h1 element.

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

Next task: Override All Other Styles by using Important

Let’s add the keyword !important to your pink-text element’s color declaration to make 100% sure that your h1 element will be pink.

An example of how to do this is:

color: pink !important;