Change the Browser and Text Zoom

HTML-CSS
1

Tell us what’s happening:
I am having issues with adding browser and text zoom. I am brand new to coding and unsure of what I am doing incorrectly. This is my first day ever to attempt coding anything in fact. Sorry in advance if this is a stupid question.

-Matt-

Your code so far

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

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

<p class="red-text">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 h1 {
    font-size: 16px;
    }class="red-text" h1>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>```
**Your browser information:**

Your Browser User Agent is: ```Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:59.0) Gecko/20100101 Firefox/59.0```.

**Link to the challenge:**
https://www.freecodecamp.org/challenges/change-the-font-size-of-an-element
2

OK, take a deep breath, we’ve all been there.

Now, reset your code. On the left there should be a button that says “Reset your code.”

So you should have this:


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

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

<p class="red-text">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>

Let’s go through the instructions:

Create a second p element after the existing p element with the following 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.

You need to create a new p element below the existing p element. It will be exactly the same as the first one except that there will be not class and the text will be different. Don’t forget a closing tag.

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

So, go up to the top and create this css. Do you know how to do a css selector for an element? Classes start with a period (like “.red-text”) but elements don’t. For example, if I wanted to change the size of the h2 element text, I’d change my style section to this:

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

You need to do the same thing, but do it for the p elements (one css entry like this will affect both.)

Try that out and let us know if anything is still confusing.

1 Like
3

Everything worked ! I really appreciate you walking me through it. -Matt