I put the correct code in as example and it tells me I should have the same width of 100 px and I need to create a smaller image

Tell us what’s happening:
Describe your issue in detail here.

smaller-image. { width: 100px; }

A cute orange cat lying on its back.
Again, it is not loading up.

  **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>
<style>
smaller-image. {
  width: 100px;
}
</style>
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" 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; rv:100.0) Gecko/20100101 Firefox/100.0

Challenge: Size Your Images

Link to the challenge:

OK, you have three problems:

smaller-image. {
  width: 100px;
}

First, that is not where to you put the period (.) to tell it that it is a class.

Secondly, where do you tell the image to use that class?

Lastly, I would have put that css declaration up with the others, but that is not causing the test to fail.

We can do things however we want. As long as the syntax is correct it will work. These challenges want things a specific way because they’re trying to educate on how to form correct syntax.

It’s common practice to place all of our styling in one <style>here</style> tag. There’s no need to open and close multiple style tags when we can do all of it in one.

The challenge courses don’t explain this so I will attempt to explain it.

CSS:
When we use a tag element like img

img {
  height: 100px;
  width: 100px;
}

Whenever there’s an img tag in the code those CSS property settings apply to it. Those properties we’ve set will apply to all <img> tags on the page. The CSS in the above example will cause every image we place on the page to be 100 pixels high by 100 pixels wide.

Using a period before the element name in the CSS creates a “class” element. We can name the class element whatever we want to name it.

.catimage {
  height: 100px;
  width: 100px;
}

Then in our html we can assign those css properties to apply to only specific objects or elements by using class="classname":

<img src="catimage.jpg" class="catimage">

Now the CSS properties we gave for .catimage will apply to that image and that image only.

Example CSS:

.100px {
  height: 100px;
  width: 100px;
}

.100x200 { 
  height: 100px;
  width: 200px;
}

.dog  { 
  height: 300px;
  width: 300px;
}

.hamster {
  height: 100px;
  width: 100px;
  border: 4px solid green;
}

Example HTML using the above classes:

<html>
<head>
<style>
.100px {
  height: 100px;
  width: 100px;
}

.100x200 { 
  height: 100px;
  width: 200px;
}

.dog  { 
  height: 300px;
  width: 300px;
}

.hamster {
  height: 100px;
  width: 100px;
  border: 4px solid green;
}
</style>
</head>
<body>

<p>This image of a cat will be whatever size the original image is.</p>
<img src="cat.jpg"></img>

<p>This same image of the cat will be 100x100 wide</p>
<img src="cat.jpg" class="100"></img>

<p>This image of a dog will be 300x300</p>
<img src="dog.jpg" class="dog"></img>

<p>This image of a hamster will be 100x100 and have a thick green border around it.</p>
<img src="erbalthegerbal.jpg" class="hamster"></img>

<body>
</html>

We can also control the size of some objects and elements such as images, div containers, and tables without using css (this is not mentioned in the challenges. It should be in my opinion. We don’t need to use CSS for everything):
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" height="100" width="100">

<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" height="400" width="400">

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.