So each class has to be separated in <style >?

Tell us what’s happening:
So each class has to be nested under tag?
I guess my question( would qualify as generosity as well ) not just for this task.

Your code so far


<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>

.red-text {
  color: red;
}

h2 {
  font-family: Lobster, monospace;
}

p {
  font-size: 16px;
  font-family: monospace;
}
</style>

<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>

<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>

<div>
  <p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
</div>

<form action="https://freecatphotoapp.com/submit-cat-photo">
  <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
  <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
  <label><input type="checkbox" name="personality" checked> Loving</label>
  <label><input type="checkbox" name="personality"> Lazy</label>
  <label><input type="checkbox" name="personality"> Energetic</label><br>
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>
</main>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36.

Challenge: Size Your Images

Link to the challenge:

Hello!

Not necessarily. You can have all your styles between a single style tag or you can split them to get a better structure. You may need more than one style to target different devices or designs (for printing, for instance, you could have a different design).

1 Like

well for this particular task . I still can’t pass . why What am I doing wrong( i did it like in the example ) ?

Well, that’s because it’s not passing the tests:


(Look at the lower left part of the picture)

Using your code, these are the errors shown:

  • Your img element should have the class smaller-image.
  • Your image should be 100 pixels wide. Browser zoom should be at 100%.

Can you try to fix them by yourself? This is with the intention that you learn what’s required :slight_smile:.

well, to be honest with you I have tried :slight_smile: You have no idea for how long …
and researched, and re-read my notes over and over.

The part of the curriculum have mentioned that " To Create a class called smaller-image".
and it already existed in there ( I just had to changed in the existing code).
and again - where I needed to change is the description name ( which it did not mentioned it’s there ) .
So on my end, I have been creating ( like it said in the curriculum) - then it has been rejecting with such summary.

1 Like

but the image in your code doesn’t have that class nor you have that class selector inside the style tags

1 Like

yes, I have figured out allready . and solved that question . thank you .

1 Like