I already have the class attribute, but not sure where the id attribute and the word "orange-text" goes

HTML-CSS
1

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/

1 Like
2

yup some problems above.
Let’s take this one step at a time.

the instructions say:

Give your h1 element the id attribute of orange-text. Remember, id styles look like this:

<h1 id="orange-text">

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

You are given this line to begin with:
<h1 class="pink-text blue-text">Hello World!</h1>
and you changed it to look like this
<h1 class ="pink-text blue-text">Hello World!</h1>

So do you see what you’re missing right away? (and do you see that extra unexpected space that is between the word ‘class’ and the equal sign? remove that.)

2 Likes
3

so is it suppose to be

Hello …

? still confused
4

Hey @mathieu01,
If you wish to enter code, you need to use three backticks followed by your code and then three backticks again to close the tag.

1 Like
5

they want you to add an id attribute. Did you add one?
They gave you an example of how to do it. Just review that example and do the same…

6

Add the id attribute in your h1 tag.
Follow the instruction carefully.
Only if you can’t figure out the answer by then, look at the answer below.

<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" id="orange-text">Hello World!</h1>
3 Likes
7

sigh. You make me feel like I’ve completely wasted my time trying to help this camper.
Just love it when people post answers after I’ve attempted to respond by guiding someone to come up with the answer themselves.

3 Likes
8

We just have different POV of helping out…

2 Likes
9

Totally agree woth you @hbar1st . That’s the way we learn. You have helped me through many problems in
that manner. And even i try to help others in that manner.

2 Likes
10

alright you will have to just add and id= “” class=""… then make a css for the id like

#id {
     color: _____;
}
1 Like
11

Thanks a lot @aditya_p , i didn’t know that

2 Likes
12

@hbar1st, that you for posting this with your explanation and the tip in the task. I saw straight away where I had gone wrong with the code.:smiley:

2 Likes