Help regarding override Class Declarations with Inline Styles

Back End Help
#1 
<style>
  .red-text {
    color: rgb(255,0,0)
  }
  .orchid-text {
    color: rgb(218,112,214)
  }
  .sienna-text {
    color: rgb(160,82,45)
  }
  .blue-text {
    color: rgb(0,0,255)
  }
  
 RGB value Blue: rgb(0,0,255)
</style>

<h1 class="red-text">I am red!</h1>

<h1 class="orchid-text">I am orchid!</h1>rgb(0,0,255)

<h1 class="sienna-text">I am sienna!</h1>

<h1 class= "blue-text">I am blue!</h1>

When they say use rgb for all of the colors, what’s the code that I should put in?

#2

Could you link to the challenge you’re stuck on?

#3

Your title does not match the challenge name for the code you show above. However, it appears you are working on the “Use RGB to Mix Colors” challenge. Always tell us what challenge you are working on, so you will get faster responses.

Anyway, remember that each property/value pair in a CSS definition should contain a special character at the end of each value. If you do not know what the character is, then you should review the earlier challenges on creating CSS class definitions.

#4 
<style>
  <h1 style = "color:orange">
  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">Hello World!</h1>

Your browser information:

Your Browser User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299.

Link to the challenge:
https://www.freecodecamp.org/challenges/override-class-declarations-with-inline-styles

#5

You post yet another challenge with your code in it. Do you have a question about this code for the challenge named “Override Class Declarations with Inline Styles”? If so, then ask your question. In fact, if your question is for this challenge, then I will move it to a new topic and unlist your original. Let me know.

#6

Oh sorry, my question is, I put the h1 style color as white in the style element and I still have an error saying my h1 element should be white, I even put it outside the style element and still have the same problem. I’m just wondering what am I doing wrong if you know what I mean. If you want further explanation I can give it.

#7

If you are working on the “Override Class Declarations with Inline Styles” challenge, then your code above is close. You are not suppose to create a second h1 element as you kind of tried to do. Get rid of: <h1 style = "color:orange"> because it does not belong in between the <style> and </style> tags. Put the inline style code in the existing h1 element as they did in the example. This is the only thing you should add to the existing h1 element. As the instructions say, “Leave the blue-text and pink-text classes on your h1 element.”

#8 
<style>
  <h1 style="color:white">
  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 white-text">Hello World!</h1>

I took out the h1 style and it said I needed that, so I put it back and replaced it with the color white instead of orange then it gave me a go. I’m stuck on the last step which says I need the h1 element white. Therefore, where should I put the inline style?

#9

You don’t want any HTML to be inside of your <style> tags. HTML is all the stuff in between angle brackets <p>Like this</p>. Everything inside of the <style> tags should just be CSS, which uses rules and curly braces kinda { like: this; }

<h1>This is HTML</h1>

/* This is CSS */
body {
    background-color: black;
    font-family: Monospace;
    color: green;
  }

The <style> tags in HTML have a very special meaning. Everything in between <style> and </style> is CSS, but everything outside is HTML. Think of it like a fence that keeps your code from mixing.

<style>
// Only CSS goes in here.
body {
    background-color: black;
    font-family: Monospace;
    color: green;
  }
</style>
<h1>HTML goes outside!</h1>

You can add styles to specific HTML elements with style. This is generally a bad idea, and you’ll learn why later, but for now just remember that you can only do it to HTML outside of the style fence.

<style>
// Only CSS goes in here.
body {
    background-color: black;
    font-family: Monospace;
    color: green;
  }
</style>

<h1 style="font-size: 1.3em;">Bad styling!</h1>
#10

Ok, so below I fixed the problem with the h1 style element, I took it from inside the style tags and put it outside like for instance I put it on top of the tag, it gave me a go but now I have another problem, when I put the h1 style outside of the tag now its saying I don’t have “orange-text” as my h1 id when I do.


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

Hey, you’re doing great, but there’s a couple of issues.

  1. You need to wrap all your code in three backticks when you’re posting on the forum. Like this:

markdown_Forums

  1. You should only have one <h1> tag in your code.
#12

Ok will do next time, so for starters I got to omit the h1 style sitting outside the tag?

#13

Well, they’re both sitting outside of the <style> tags, but I think I know which one you’re talking about. Just make sure you have one <h1> with style, class, and id on it.

#14

Nevermind I got it, thanks everyone.