Creating a class override

[El_Tristanio]

So, this is my code

<style>
body {
background-color: black;
font-family: Monospace;
color: green;
}
#orange-text {
color: orange;
}
#white-text {
color: white;
}
.pink-text {
color: pink;
}
.blue-text {
color: blue;
}
.white-text {
color: white;
}
</style>
<h1 id="white-text" class="pink-text blue-text white-text">Hello World!</h1>
and i need to give h1 an id of white-text and orange-text . How can this be done

 

[El_Tristanio]

Here is a screenshot of my page https://gyazo.com/6e2f48488816c73e51840b7e04cbc3b8[DOUBLEPOST=1508972241][/DOUBLEPOST]"
So we've proven that id declarations override class declarations, regardless of where they are declared in your style element CSS.

There are other ways that you can override CSS. Do you remember inline styles?

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

<h1 style="color: green">

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





Get a hint


Your h1 element should have the class pink-text.

Your h1 element should have the class blue-text.

Your h1 element should have the id of orange-text.

Give your h1 element the inline style of color: white.

Your h1 element should be white.

"
my code
"

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

 

[snakes]

Give your h1 element the inline style of color: white;

Inline is the key here, google it

Additionally, fcc has an active chatroom, probably better to ask there https://gitter.im/FreeCodeCamp/FreeCodeCamp

 

[WillFTW]

Why are you applying several color classes to one element despite knowing only one will be used?

 

[snakes]

Why are you applying several color classes to one element despite knowing only one will be used?

It's for an freecodecamp tutorial on how overriding works[DOUBLEPOST=1508975219][/DOUBLEPOST]His image https://gyazo.com/6e2f48488816c73e51840b7e04cbc3b8

 

[WillFTW]

It's for an freecodecamp tutorial on how overriding works[DOUBLEPOST=1508975219][/DOUBLEPOST]His image https://gyazo.com/6e2f48488816c73e51840b7e04cbc3b8

ah so he'd just do style="color: #FFF"

 

[tomo54321]

Or you can do

#white-text {
color: white!important;
}

 

[snakes]

Or you can do

#white-text {
color: white!important;
}

No, that isn't inline style