Size your Images kitten

Size your Images kitten
0

#1

Tell us what’s happening:

I get these errors:

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

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>

<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. ">
<style>
  img {
        .smaller-image {
          width: 100px;
    }
</style>

<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 class="red-text">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 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36.

Link to the challenge:


#2

You should only have one set of style tags in your document. Do not create a second set as you have currently done.

Also, with plain CSS, you can not nest selectors inside each other. To solve this challenge, you only need to create a smaller-image class with a width property set to 100px (which you have done, but it should not be nested inside an img selector.

Also, inside the img tag of the html, you need to assign the class name to the class attribute. You might want to review the following challenge in case you have forgotten how to do that.