Why the styling has both gallery and image elements

Web Development Bootcamp
1

I am working on the flex box lesson and noticed that the styling isnt changing with or without .gallery added to the css styling. I am not sure as to why it is important to have both gallery and img elements included for this styling. Why can’t we just have img element with the below styling?

.gallery img {
width: 100%;
max-width: 350px;
height: 300px;
object-fit: cover;
border-radius: 10px;
}

Could someone please let me know if I am missing a concept to understand this better?

2 Likes
2

Hello @thehappycoder . There maybe several reasons why your css styling isn’t changing. but mostly check your html and see if gallery is well attributed with class. having both gallery and img elements makes your styling easy and simple.

I hope this helps you figure it out. if not, you can post your code in here and we can figure it out together.

3 Likes
3

another thing you can do is to refresh your browser.

i hope this help too.

2 Likes
4

@thehappycoder rotimi is right recheck ur code…

1 Like
5

Hey Ramya,

In this particular example, you are right, you can style the image element by just targetting img.

However, you got to think a little bit in the larger scope - a web page usually has more than just one (set of) image(s) to display. And without specifically targeting things like ‘only the images related to the gallery’, it will also apply that style elsewhere. This is just thinking ahead of the game. With a fancy word this is called ‘specificity’. This is a good resource explaining its importance: CSS Specificity explained - YouTube

As for things not rendering properly, that sounds like what others have proposed, maybe a tiny error in the code and/or a browser hickup. Try it in a fresh browser? Or on codepen?

I hope this helps.

5 Likes
6

Hi @thehappycoder

Like others have say I think it is about:

  • specifity, we ONLY want to add those styles to our gallery images
  • readability, it is easier to understand that you just styling images inside the gallery
  • maintainability, using elements selector for global styles and .class selector for this (not div img, for example) will help again with specificity and also easier to mantain because our CSS won’t depend of HTML tags (for example, if you change your <div class="gallery"> for a <section class="gallery"> your CSS still will work!!).

Just some thoughts. I hope it helps.

Happy day Ramya

4 Likes
7

Thank you everyone for giving me such clarity!! I will check out the video on YouTube about css specificity!

Thanks so much :purple_heart:

2 Likes
8

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