freeCodeCamp Challenge Guide: Use a CSS Class to Style an Element

freeCodeCamp Challenge Guide: Use a CSS Class to Style an Element
0

#1

Classes are reusable styles that can be added to HTML elements. You can apply a class to an HTML element like this: <h2 class="blue-text">CatPhotoApp</h2>.

Note that in your CSS style element, classes should start with a period. In your HTML elements’ class declarations, classes shouldn’t start with a period.


I don't know why it's not excepting my h2 as red need help now
Use a CSS Class to Style an Element. i need help on this topic have been stuck
#2

I still cannot tell what I’m doing wrong. My text is still black.

h2 .red-text { color: red; }

CatPhotoApp

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.


#3

I was having trouble too. The instructions seem a bit choppy. What I ended up doing was copy pasting from the example and then editing in red for blue. Here is what mine looks like:

.red-text { color: red; }

CatPhotoApp

Notice how the top CSS portion has a period before the red-text part but not in the html bit?

#4

Mine is still wrong. I was following the lesson fine until this point. Now, I’m just guessing and putting anything in anywhere. How do we get help? I can’t move forward without getting this right and the hint didn’t help me.


#5

I was also stuck for a bit but I figured it out after about 10min.
Here’s a hint guys, you have to change/add code to lines 3, 4 and 8. Happy coding.


#6
<style>
  .red-text {
    color: red;
  }
</style>
<h2 class="red-text">CatPhotoApp</h2>
<h2>CatPhotoApp</h2>

#7

Ive been stuck on this problem for a few days now and nothing that I have seen has really helped out. I got everything but where it says “Your stylesheet should declare a red-text class and have its color set to red.” Can someone please help? thanks


#8

Follow what this guy has put down.


#9

Thanks so much, everybody. I compared my code with Untrue Hunter’s code letter by letter and noticed that I’d forgotten to delete a set of brackets from the previous exercise. Lesson learned; I really need to work on my attention to detail.

Thanks again for responding so quickly.

z


#10

what is the difference between Use a CSS Class to Style an Element and Use CSS Selectors to Style Elements??


#11

My code broke down because I didn’t recognize the differences between attributes, classes and elements and their definitions. This is important.

CSS attributes typically are applied globally to all headers or sets of headers.

.blue-text { color: blue; }

I assumed the above is a CSS class statement for all headers but I wanted to test it

By the way this code could have been written on one line:

.red-text { color: red; }

Okay, so we defined the class “red-text” is red, but we still have to call it up by its class name in order to see it applied

Let’s do that:

CatPhotoApp

That worked. (No it didn’t work. The HTML for this page wouldn’t allow the < > bracketed entries to display)

Element styles can be specific to one particular header in its unique application and that should depend on exactly where we place the class call but it would not work here for me. I also tried a different color by adding the header

Blue Dog Democrat

thinking it would come back in blue text. Instead it came back in black text.
Then I tried replacing it with

Blue Dog Democrat

guessing it would be in red, and that came back in black text

Finally I tried going back and changing the initial class entry to blue and instead everything came back in black. Conclusion? The problems editor works but it wasn’t programmed to display the color blue. I guess we can’t stray too far when we experiment. And I’m guessing the style in angle brackets or colors displayed didn’t print in my code above because the HTML coding for this page took precedence.


#12

OMG, that is so helping. Thank you so much. How can you know that answer?


#13

Okay, so I’ve been jamming along with these lessons this morning, but this problem is giving me a headache.

My code is as follows:
"
.red-text {
color: red;
}

CatPhotoApp

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

"

Minus the start and end quotes, that’s what I have on my editor. It will not change the text color to red. Do we have to specify it as text-color, or what? Is it automatically heeding it as background-color? Why isn’t anything happening?

Dang, it looks like even with the start and end quotes it takes away the bracketed items. Oh well.


#14

Your code is correct. You have defined a class of text but you need to state the name its stored under. In this example Style is the name your code will be available under and it will apply only to the elements which call for it, so lets do that.

style .red-text{
color:red;
]
now we have to have the h2 headers make the class call red-text


#15

Sorry, I’m only a day ahead of you guys. The next line of code didn’t print. Not sure how to enter the code so that it prints here.
The next line of code before CatPhotoApp is the instruction for h2 headers with class equal to red dash text This is the class name we assigned it and now we have to call for it to get it to work…


#16

My code looks just like this but for some reason it is not working. Any tips or feedback?


#17

Hi!

I changed someting in code and I wrote like below and it’s working :wink:

‘red-text’ not “red-text”


#18

thanks everyone ,this really helped because I was stuck on this challenge for a while


#19

here’s my code. It’s still not correct???

CatPhotoApp

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.


#20

the problem is between the style class.
here’s the code.

h2.red-text { color:red; }

don’t put a space between h2 and the dot.