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

Guide
1

Use a CSS Class to Style an Element

Problem Explanation

In CSS, we can target the styling of specific elements that match the specified class attribute.

For example, if you have an element with a class of button, then we can style the look & feel as follows:

  • Start with a . (period) character followed by the class name and add your style
.button {
  border: 2px solid black;
  text-align: center;
  display: inline-block;
  padding: 5px 10px;
}

Now, the real benefit of using class to style an element is to target multiple elements that have the matching class attribute. For example, if there are 2 buttons on a webpage and they both look similar in style but only differ in size, then we can use a common class to give them common styles and a unique class for each button to give them different size values.

The following HTML code snippet depicts 2 buttons:

  • Sign up button that should have common button style + should be large in size
  • Login button that should have common button style + should be small in size
<div class="button large">Sign up</div>
<div class="button small">Login</div>

Using the above defined .button class as a common style for both buttons, and using .large and .small class attributes to give them different sizes, we can achieve the look we want without duplicating our code.

.large {
  font-size: 20px
}

.small {
  font-size: 10px
}
11 Likes
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.

4 Likes
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 Likes
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.

10 Likes
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.

8 Likes
6 
<style>
  .red-text {
    color: red;
  }
</style>
<h2 class="red-text">CatPhotoApp</h2>
<h2>CatPhotoApp</h2>
88 Likes
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

2 Likes
8

Follow what this guy has put down.

6 Likes
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

4 Likes
10

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

3 Likes
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.

3 Likes
12

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

1 Like
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.

1 Like
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

3 Likes
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ā€¦

1 Like
16

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

1 Like
17

Hi!

I changed someting in code and I wrote like below and itā€™s working :wink:

ā€˜red-textā€™ not ā€œred-textā€

5 Likes
18

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

1 Like
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.

1 Like
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.

3 Likes