Container

I’m on the following exercise in the Responsive Design course: Link. I’m confused because the class in the HTML file is class="container gallery and in the CSS it was simply .gallery. Can someone please explain this to me? I’ll be very grateful for your help!

Yes, in CSS the dot . is used as a prefix for class variables and the # is used as a prefix for id variables.

.thisIsSomeClass while #thisIsASpecificId.

@vickyrai Classes generally refer to items you have a lot of and want to have uniform styling. Like let’s say you have many boxes. They all share the same shape. But maybe one of them has a peculiar feature, that it’s blue. I would use an id to classify that one level further.

.box {
   /* all boxes are rectangular */
}

#myFavoriteBox {
  /* my favorite box is blue */
}

The result is all my page boxes will be rectangular… and my favorite one will be blue.

@toastedpitabread Thanks so much for your reply! However, the class was “container gallery” in HTML file but only .gallery in the CSS file. And it worked!

Hi,

That’s another convention, an element in html can have multiple classes (seperated by spaces). You see this used a lot with bootstrap.

<div class="box container object delivery">
</div>

Then in the css you can target one specifically (or multiple classes at once).

Hi @toastedpitabread. I see! Thank you so much!

1 Like