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

**URL:** <https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-use-a-css-class-to-style-an-element/18337>\
**Category:** freeCodeCamp Contributors\
**Tags:** guide\
**Created:** [July 7, 2016, 11:16pm UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-use-a-css-class-to-style-an-element/18337 "2016-07-07T23:16:42Z")\
**Posts on this page:** 18\
**Page:** 2

<div class="post-metadata">

**Author:** ![twizzer1030](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/twizzer1030/32/94549_2.png) [@twizzer1030](https://forum.freecodecamp.org/u/twizzer1030)\
**Post date:** [July 16, 2017, 9:32am UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-use-a-css-class-to-style-an-element/18337/21 "2017-07-16T09:32:54Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![cskidv](https://avatars.discourse-cdn.com/v4/letter/c/ee7513/32.png) [@cskidv](https://forum.freecodecamp.org/u/cskidv)\
**Post date:** [July 16, 2017, 11:36pm UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-use-a-css-class-to-style-an-element/18337/22 "2017-07-16T23:36:00Z")

</div>

I had a code and it was:

 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.

---

<div class="post-metadata">

**Author:** ![Adil786](https://avatars.discourse-cdn.com/v4/letter/a/f14d63/32.png) [@Adil786](https://forum.freecodecamp.org/u/Adil786)\
**Post date:** [July 17, 2017, 5:40pm UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-use-a-css-class-to-style-an-element/18337/23 "2017-07-17T17:40:21Z")

</div>

hay I hope this helps a little im stack on the four question

 h2 { 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.

---

<div class="post-metadata">

**Author:** ![livia](https://avatars.discourse-cdn.com/v4/letter/l/8491ac/32.png) [@livia](https://forum.freecodecamp.org/u/livia)\
**Post date:** [July 19, 2017, 8:28pm UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-use-a-css-class-to-style-an-element/18337/24 "2017-07-19T20:28:55Z")

</div>

How am I supposed to make my stylesheet declare a red text. I am very confused.

---

<div class="post-metadata">

**Author:** ![theron\_elite](https://avatars.discourse-cdn.com/v4/letter/t/9f8e36/32.png) [@theron\_elite](https://forum.freecodecamp.org/u/theron_elite)\
**Post date:** [July 20, 2017, 3:33am UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-use-a-css-class-to-style-an-element/18337/25 "2017-07-20T03:33:47Z")

</div>

“Your stylesheet should declare a red-text class and have its color set to red.” What does this mean??

---

<div class="post-metadata">

**Author:** ![theron\_elite](https://avatars.discourse-cdn.com/v4/letter/t/9f8e36/32.png) [@theron\_elite](https://forum.freecodecamp.org/u/theron_elite)\
**Post date:** [July 20, 2017, 3:53am UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-use-a-css-class-to-style-an-element/18337/26 "2017-07-20T03:53:05Z")

</div>

figured it out it looks like this   
.red-text {  
color: red;  
}

---

<div class="post-metadata">

**Author:** ![Njeste](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/njeste/32/161649_2.png) [@Njeste](https://forum.freecodecamp.org/u/Njeste)\
**Post date:** [July 24, 2017, 9:22am UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-use-a-css-class-to-style-an-element/18337/27 "2017-07-24T09:22:26Z")

</div>

Hey guys i figured it out, i was stuck at it for like 2days.  
h2.red-text{color:red;}  
.red-text{color:red;}

---

<div class="post-metadata">

**Author:** ![Giant81](https://avatars.discourse-cdn.com/v4/letter/g/f9ae1b/32.png) [@Giant81](https://forum.freecodecamp.org/u/Giant81)\
**Post date:** [July 25, 2017, 2:41pm UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-use-a-css-class-to-style-an-element/18337/28 "2017-07-25T14:41:58Z")

</div>

I had the correct solution for quite awhile, but was unable to get it to accept my code. finally I tried a different browser and it worked fine.

If you have the correct code but it is not accepting it. Try a different browser. In my case Edge failed but Chrome worked.

---

<div class="post-metadata">

**Author:** ![ClassCompliant](https://avatars.discourse-cdn.com/v4/letter/c/c67d28/32.png) [@ClassCompliant](https://forum.freecodecamp.org/u/ClassCompliant)\
**Post date:** [July 26, 2017, 6:11am UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-use-a-css-class-to-style-an-element/18337/29 "2017-07-26T06:11:53Z")

</div>

This forum is fantastic 🙂

I struggled to determine exactly what the CSS was in relation to the HTML, think I’ve got it now tho.  
Cheers

---

<div class="post-metadata">

**Author:** ![Madlaka](https://avatars.discourse-cdn.com/v4/letter/m/fbc32d/32.png) [@Madlaka](https://forum.freecodecamp.org/u/Madlaka)\
**Post date:** [July 26, 2017, 3:09pm UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-use-a-css-class-to-style-an-element/18337/30 "2017-07-26T15:09:40Z")

</div>

Thank you so much UntrueHunter.

---

<div class="post-metadata">

**Author:** ![isnag](https://avatars.discourse-cdn.com/v4/letter/i/a3d4f5/32.png) [@isnag](https://forum.freecodecamp.org/u/isnag)\
**Post date:** [July 27, 2017, 9:57am UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-use-a-css-class-to-style-an-element/18337/31 "2017-07-27T09:57:54Z")

</div>

“

## CatPhotoApp
” is not working for me. h2 is still in black

---

<div class="post-metadata">

**Author:** ![gamingchampion22](https://avatars.discourse-cdn.com/v4/letter/g/46a35a/32.png) [@gamingchampion22](https://forum.freecodecamp.org/u/gamingchampion22)\
**Post date:** [July 28, 2017, 12:58pm UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-use-a-css-class-to-style-an-element/18337/32 "2017-07-28T12:58:46Z")

</div>

I don’t know but there is a dot if u can see behind the red-text.  
Hope that I helped.

---

<div class="post-metadata">

**Author:** ![isnag](https://avatars.discourse-cdn.com/v4/letter/i/a3d4f5/32.png) [@isnag](https://forum.freecodecamp.org/u/isnag)\
**Post date:** [July 29, 2017, 6:58am UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-use-a-css-class-to-style-an-element/18337/33 "2017-07-29T06:58:06Z")

</div>

@janika that’s what I have in line 3, but my problem is line 6

## CatPhotoApp
it's not working

---

<div class="post-metadata">

**Author:** ![isnag](https://avatars.discourse-cdn.com/v4/letter/i/a3d4f5/32.png) [@isnag](https://forum.freecodecamp.org/u/isnag)\
**Post date:** [July 29, 2017, 7:01am UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-use-a-css-class-to-style-an-element/18337/34 "2017-07-29T07:01:57Z")

</div>

@gamingchampion22 - you’re referring to the color line, i’m asking about the class line

---

<div class="post-metadata">

**Author:** ![janika](https://avatars.discourse-cdn.com/v4/letter/j/b782af/32.png) [@janika](https://forum.freecodecamp.org/u/janika)\
**Post date:** [August 2, 2017, 5:12am UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-use-a-css-class-to-style-an-element/18337/38 "2017-08-02T05:12:45Z")

</div>

h2.red-text{color: red;}

## 

## CatPhotoApp

this will do

---

<div class="post-metadata">

**Author:** ![alton1231](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/alton1231/32/64328_2.png) [@alton1231](https://forum.freecodecamp.org/u/alton1231)\
**Post date:** [August 6, 2017, 1:56pm UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-use-a-css-class-to-style-an-element/18337/39 "2017-08-06T13:56:23Z")

</div>

My code runs fine on desktop but mobile is really choppy to work with and even when I get it done the class-selector just won’t work to color the element. I went through letter by letter to make sure it was the same as the way I had gotten it to work on desktop, but the CSS just wouldn’t run.

```
<style>
  .red-text {
    color: red;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>

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

---

<div class="post-metadata">

**Author:** ![camperbot](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/camperbot/32/18364_2.png) [@camperbot](https://forum.freecodecamp.org/u/camperbot)\
**Post date:** [August 10, 2019, 1:18am UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-use-a-css-class-to-style-an-element/18337/41 "2019-08-10T01:18:51Z")

</div>



---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 7, 2025, 12:00pm UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-use-a-css-class-to-style-an-element/18337/42 "2025-01-07T12:00:16Z")

</div>



[Previous page](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-use-a-css-class-to-style-an-element/18337.md?page=1)