freeCodeCamp Challenge Guide: Change the Font Size of an Element

Change the Font Size of an Element


Problem Explanation

We need to create an entry for p elements and set the font-size to 16 pixels (16px), Inside the same <style> tag that contains your red-text class.

Example:

h1 {
  font-size: 30px;
}

Solutions

Solution 1 (Click to Show/Hide)
p {
  font-size: 16px;
}
19 Likes

Hi, Having a spot of bother with this very basic challenge. Code pasted below is good to go, the Run Test button doesn’t seem to think so. Any ideas where the problem exists?

** Code used in the challenge

.red-text { color: red; font-size: 16px; }

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.

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

** End Code used in the challenge
2 Likes

I had the same issue. Turns out you need to separate the p element from the rest of it:
.red-text {
color: red;
}
p { font-size: 30px;
}

24 Likes

for all those who stuck here after correct styling like me for the point
your p element should contain the first few words of the provided additional kitty ipsum text.
use below text in you p tags
kitty ipsum text: Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

7 Likes

Thanks @ramsibus, that worked.

Your p element should contain the first few words of the provided additional kitty ipsum text.

I cannot get past this error message:

“Your p element should contain the first few words of the provided additional kitty ipsum text.”

This is my code:

.red-text { color: red; } p { font-size: 16px; }

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.

<p kitty ipsum text: Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.
3 Likes

Between the style tags, give the p elements font-size of 16px. Browser and Text zoom should be at 100%.

i am having this problem

2 Likes

Hi code still not working. … any idea why??

Which part of the code?

Hi, This is my first post on the forum.
I just started with the course and can’t seem to get past this point either.
Would someone be kind enough to post the correct code for the complete challenge and then I will probably understand what I am doing wrong; and thus understand the concept better.
Thanks.

2 Likes
.red-text { color: red; } p{font-size: 16px;}

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.

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

This is my code

Browser and Text zoom should be at 100%. how do i pass this?

I’m having the same issue…Did you get any answer??

I am having the same problem like text zoom should be 100%.What is that?

I figure it out guys!!!
Here’s my code

.red-text { color: red; } p { font-size:16px; }

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.

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

4 Likes

for some reason this still does not work for me ? :[

.red-text { color: red; } p{ font-size:16px; }

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.

Purr jump

Why wont this go through?

im having the same issue it wont work for me either :[.

Try it using the "<div>" tags:

    <style>
      .red-text {color: red;}
      .p {font-size: 16px;}
    </style>

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

      <p class="red-text" class="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>
      <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>
      <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>

    </div>
9 Likes