<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?
Could you link to the challenge you’re stuck on?
<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
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.
<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?
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>
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>
Hey, you’re doing great, but there’s a couple of issues.
<h1> tag in your code.Ok will do next time, so for starters I got to omit the h1 style sitting outside the tag?
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.
Nevermind I got it, thanks everyone.