Luke Luke - 1 month ago 9
CSS Question

How do I apply this css class

I am having trouble applying this css class. The red-text class is not being applied to my html. Why?

Here is the css:

<style>
.red-text {
color: #FF0000
}
.green-text {
color: #00FF00
}
.dodger-blue-text {
color: #2998E4
}
.orange-text {
color: #FFA500
}
</style>


Html:

<h1 class="red-text">I am red!</h1>
<h2 class="green-text">I am green!</h2>
<h3 class="dodger-blue-text">I am dodger blue!</h3>
<h4 class="orange-text">I am orange!</h4>


Why does the red-text not get applied.

Answer

Your CSS is not correct: it should not include <style> tags.

That's probably why you .red-text rule doesn't work: the browser is unable to parse the rule <style>.red-style {color: #FF0000} because it is not valid CSS.

Remove the <style> tags and that should work.

By the way, note that the browser is also unable to parse the last rule </style> of you stylesheet. But that doesn't impact anything and that's why the .orange-text rule works.

EDIT: It's even more interesting. The </style> tag is simply ignored by the browser, at least by Chrome. If you inspect this JSFiddle with Chrome inspector, here is what you find:

<style type="text/css">
    <style>
.red-text {
  color: #FF0000
}
.green-text {
color: #00FF00
}
.dodger-blue-text {
color: #2998E4
}
.orange-text {
color: #FFA500
}
</style>

Strangely enough, Chrome is able to detect that the closing </style> tag shouldn't be there, but it is not able to do the same with the opening <style> tag. Note that if you mispell the closing tag as </stylle> for example, it is not removed by Chrome.