Would you help me solve this css?

1 



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

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

<p1 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.</p1>

<div>
<p2>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p2>
</div>
  </body>
2

The <style> tags should be in the <head> section, not inside <body>.

There’s no such HTML element as <p1> or <p2>. It’s just <p>.

What’s the challenge name for this?

3

The name is Change the Font Size of an Element.
and the task is Between the style tags, give the p elements font-size of 16px. Browser and Text zoom should be at 100%.

I don’t know where to put the body and how to tell apart the p1 and p2?

Many thanks.

4

Generally, you don’t. If you have to number every single paragraph in your page, it will be a nightmare to maintain (Imagine having a page with twenty numbered paragraphs, then you decided to insert another paragraph after the tenth. Then the new paragraph is now the 11th, and you have to change the numbers of the other paragraphs that follow. And you also have to style every single numbered paragraph individually).

For now just replace the p1 and p2 instances to p. Then move the <style> tags and their contents in the <head> section:

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

   ...
  </style>
</head>

<body>
  <h2 class="red-text">...</h2>
</body>
5

This is what the code should look like. Normally, the style tags would be in the head portion of the HTML doc, but this challenge doesn’t make you do that.

<style>
  .red-text {
    color: red;
  }
  
  p {
    font-size: 16px;
  }
  
</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>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
6

When you reference the class .red-text in the style tags, those will change any

that has that class. So it would look like:

<p class="red-text"></p>

When you refer just p in the style tags, it will change all

elements, regardless of ID and class, because it’s not specifying any ID or class. It’s only specifying

's in general.

Don’t worry about and right now. That’s not the focus of this particular challenge.

7

Many thanks for Kschmatt’s help. It went through this task.

And thank you for Kevomedia. I am a rookie and novice. later I hope I can learn more.

8

No worries, friend. We were all new at one point, and we are always ‘new’ to something. :slight_smile:

1 Like