Using CSS: targeting multiple elements at once


Looking at my CSS here, or looking at my
design and looking at my CSS, you can see that my h1 is white, but my h2
and my h3 are not white. So, maybe I want to make my h2 and h3 also
white. I could very easily just type h2 like this
and do color: white. But since they’re really exactly the same
as the h1, doing it that way is kind of unnecessary. So, up here on my h1, I can just put a
comma and write h2 like that. So now all of the h2on my website and all
of the h1will both apply these properties. So you can see like that. I can do the same thing for the h3. I’ll just put another comma and write h3, so now all the h3s, 2s and 1s will all
have the same style. But maybe for some reason, something about
them I want to be different. So, I do want the color to be white, but maybe the h2s now, I want to have a dark
green background color instead. So, I can go in here and I can type h2 over again like this and
give it a different background color. So, let’s say darkgreen. I’ll go refresh and now you can see the
h2s are dark green. But I can also overwrite the color. So, I can put a different color in here,
and like that. And now you can see the, I’ve changed the
color. So, this CSS target, or set of properties, is targeting the h2 and
setting the color to white. And now as the browser reads down the page
of CSS, it hits this h2. And it says, okay, now I’m going to change
the background color to green and now I’m going to overwrite the color to
something else. So, C, CSS, the C in CSS stands for
cascading. And what that means is as the browser
works its way down your CSS file, it applies and overwrites CSS further up. So we can overwrite the CSS here by or we can overwrite this CSS here by writing
new CSS underneath it. The same thing could apply. I could just target paragraphs over again
and give them a background color of orange like that,
and now you’ll see they’re all orange. So, this line is making them yellow and
then I’m targeting them all over again and making them orange. Now, this is kind of unnecessary in this
scenario. But it does make sense here where we want
all of them to have the same sort of similar properties, but one of them to be
slightly different.

Tags:, , , , , ,

2 Comments

Add a Comment

Your email address will not be published. Required fields are marked *