How do i include class and id on one h1 element?

Tell us what’s happening:

Your code so far


<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">Hello World!


</h1>

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 10323.67.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.209 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/basic-css/override-class-declarations-by-styling-id-attributes/

<h1 class="some-class" id="some-id"> This is a heading </h1>

Because of specificity, just remember that any styling added to the id “some-id” will supersede any styling done to the class of “some-class” assigned to the same h1.

Also, if you have two classes assigned that want to give different colors to the text, whatever is written LAST in your stylesheet will actually be applied. It overwrites the previous class.

So in your example, it will actually be blue.

3 Likes

I have answered the same challenge in this forum

1 Like