0:00
Yo guys, what's up? This is CSS for Beginners Lesson 14, and in this video we're going to
0:12
take a look at targeting multiple elements in CSS. Alright, so I'm back here in the HTML file that we've got. I've stripped out all the
0:20
CSS again from this CSS file here, and I've also added just a couple more tags. I've got
0:24
these LI tags here, I've got this A tag here, and we've still got the spans and the P's
0:30
Now, to demonstrate this lesson, I want you to think of this example, this scenario. You're
0:36
doing a website for a client, and this client's really particular, and he says to you, hey
0:40
you know what? I want all the text on my website to be the same
0:45
Now what does this mean to you? Well, it means that you're going to have to come into your CSS and you're going to have to make a rule for your P tags, span tags, A tags, and LI
0:53
tags, and possibly more if you've got different variations in your HTML, and you're going
0:57
to have to style them all the same. Okay, so how would we normally do this? Well, we'd do our selectors like this, first of
1:03
all P tags, and he says to you, you know what? I want everything colored red. I'm a Manchester
1:07
United fan, why not? And I want everything to be a font size of 14 pixels, and I want
1:14
it to be a font weight of bold, and I want it to be a font family of Arial. Everything
1:22
on the website has to be Arial. And you know what? He probably said more, but we'll stick to these four for now
1:28
Now what would you do? You'd have to do this rule for every single thing. So I'll copy
1:32
this, paste, paste, paste. I think we've got four different things. The next one is span
1:38
So we're doing identical rules for the span and the P tag. We'll do one for the A, and
1:43
we'll do one for the LI tags. Okay, so that should solve it. Let's just take a look in the browser and make sure they
1:50
should all be identical. Open this up in Google Chrome. And yeah, they're all identical
1:58
They're all red, they're all bold, and they're all Arial. They're all the same font size
2:03
So we've done the job, perfect. However, this is really not a good use of your time. You've
2:10
had to copy and paste. It may be that there's more tags here that you need to style, and
2:14
you could have double this amount here. And then if you want something changing, not only
2:18
are you going to have to change it once up here for the P tag, you'll have to change it for each different rule you've done. So it's going to take a long time. Secondly
2:26
it's going to increase the size of your CSS file, and that's bad for two reasons. The
2:30
first reason is that when you upload this to the website, it's going to take longer
2:34
for the browser to load that CSS file because it's going to be a larger size. And secondly
2:39
it's going to be harder when you come to update things and you're scrolling through it because it's going to be much more bigger. It's going to be much longer. So this isn't the ideal
2:48
way to do it. If you want everything the same, the best way to do it is this. It is
2:52
to target multiple elements within one rule. And that's really easy. All you need to do
2:58
is write one rule with all your properties and values in it, and then you can write multiple
3:03
selectors on one line. Now the way we do this is by separating the selectors with a comma
3:08
So we put a comma after the P, and we also want spans. We do a space to separate them
3:14
and then a comma, and then we want A, all A tags, and then we want LI tags. So this
3:21
here now is targeting all of these within one CSS rule. There's four selectors separated
3:27
by commas. And by the way, the last one here doesn't have a comma. It's only a comma when
3:34
you've got another selector preceding it. Not preceding it, the opposite of that. Have
3:42
I got that right? Anyway, you only want a comma when you've got another selector coming
3:46
after it. So let's save this again and view this in a browser just to make sure it's worked
3:56
And yeah, exactly the same. So I think you'll agree that this is a much more time efficient
4:01
way of doing things, much simpler way of doing things, and it's going to reduce your CSS
4:06
size. So yeah, great all around. Obviously, if you have any questions about this whatsoever
4:13
feel free to comment below. I'll answer all of those as soon as I can. If you like these
4:17
videos, if you enjoy them, please like, subscribe, share them, and I'm going to see you guys
4:23
in the next video. Bye
