Learn Basic CSS by Building a Cafe Menu - Step 90

[faizasana13]

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

        <img src="https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg" alt="coffee icon"/>

for above html we have to display the coffee icon in center. I did the following CSS codes still unable to figure out what is wrong

.img {
  display:block;
  margin-left:auto;
  margin-right:auto;
}

Challenge: Learn Basic CSS by Building a Cafe Menu - Step 90

Link to the challenge:

freeCodeCamp.org

[hbar1st]

@faizasana13

.img {
  display:block;
  margin-left:auto;
  margin-right:auto;
}

are you getting any hints when you check?

[faizasana13]

Yes it is – Hint: You should use an img selector
I even try the class method and that didn’t work as well

[hbar1st]

great, so notice that the test is telling you that it doesn’t think that .img { is a valid selector for img

Now, try to believe that it is 100% correct.
Why do you think it doesn’t believe your .img is the same as img?

[faizasana13]

well the .img isn’t declare as class in the following code even though that was the first thing I did even then it didn’t execute

.img is class selector whereas img is simple code with no target. Hope I am right with this

[hbar1st]

yes, .img is used only to select a class of type img

So if the exercise wants you to select img then don’t use the class selector .img

[faizasana13]

finally able to solve thanks. yet can you explain how come it recognizes as there is no link? what if the code had more than one img?

[hbar1st]

no worries, please consider not posting the solution next time though. (we want to have less of solutions in the forum, and more support in terms of hints/tips/guides)

[hbar1st]

the browser knows that everything inside the css is to be applied to everything in the html file because of this line:

<link href="styles.css" rel="stylesheet"/>

If the code had more than one img, and you wanted different styling for each one, then you would use a different selector like the id selector (ids have to be unique for each element), or you could also tell the browser which img you wanted by its location (such as telling it to pick the first img child of a div for eg or the last img child of a body etc).

All about CSS selectors here:

CSS Selectors Reference