0:00
Hey everyone, what's up? I'm the Net Ninja and this is CSS for Beginners Lesson 8, Targeting
0:11
Elements. So in previous lessons we've talked about what CSS is and how it contains a selector
0:18
for targeting content on your HTML document and a declaration for styling it. Now these
0:24
selectors come in a variety of forms, we can target loads of different things, loads of different ways, but the simplest way to do it, to make selectors, is to just target the
0:32
element names themselves. Really simple. So that's what we're going to do here. So to
0:38
start with, we've got these two paragraphs here in the HTML document, we want to grab
0:41
those and style them both together in one rule. And we do this by just grabbing the
0:47
element or target name, which is P, here. So all you need to do is write P and there's
0:53
your selector. Dead simple. Okay, that's going to target all the paragraph tags on
0:57
the page. So I can just add in a few rules in my declaration here, we'll say a font size
1:02
of, I don't know, 12 pixels, and then we'll give it a colour of red. Okay so now the P
1:11
tags on this page are going to be 12 pixels in size and a colour of red. So what's next
1:16
We've got this A tag here, so I want to style that too. Again, just by targeting the tag
1:21
name, which is A. So all I need to do for my selector is write A and then we can do
1:25
our declaration. And this time what I'm going to say is a text decoration property of, oops
1:32
underline and then a colour, we'll say this time blue. So we want all our A tags, which
1:42
is only this one on the page, to be blue and to be underlined. And again, don't pay too
1:46
much attention to these values and properties I'm putting in here. I promise we're going
1:50
to cover that later. I know I keep saying I'm going to do it later, but I will get around to it. Right now I just want to focus on these selectors and how to target tags. Okay, so
1:59
what else have we got? We've got this span tag here, so we'll target that next. And again
2:03
you just target the tag name, dead simple, span. And we say for this one, let's say text
2:10
transform uppercase. We want these all to be capital letters. And then we'll go up to
2:16
this H1 here. Again, just type the tag name for your selector, which is H1. And then we'll
2:23
say we want a font size this time of 32 pixels, nice and big. And then finally, we've got
2:30
this div here. Now we're not going to select it using the ID. We're going to select it
2:34
using the tag name again, which is div. So we'll go to div. That's our selector. And
2:40
then we'll say width 100%, background color. We'll say gray for that. All right then. So
2:53
that's about it. We've targeted all the tags here using only the tag names. And we've starred
3:00
them in the CSS. Very, very simple. You can't go wrong with it. And like I said, loads of
3:05
different ways to target elements in the HTML document. This is just one of them and the
3:10
most simple form. I'm going to go into different ways of doing it in the up and coming lessons
3:16
But for now, what I want to do is save this. And I'm going to preview it in a browser just
3:20
to make sure that everything's worked OK. So we're in the contact page. So we'll right
3:24
click that, show in Explorer. And we'll open this with Google Chrome. And then we go. This
3:31
is our header that we gave a background color of gray. That's our H1. The P tags here in
3:37
red. And the A tag is underlined in blue. And then this is our span tag. Yo, I'm a span
3:44
tag. Nice and loud in capital letters. So I hope now you have got a good understanding
3:50
of how to apply rules by just targeting the tag names. Like I say, really simple. But
3:56
if you have any questions whatsoever, feel free to comment below. And I'm going to answer
4:00
all of those. Otherwise, I'm going to see you guys in the next lesson where we're going
4:04
to be covering IDs and classes. Don't forget to subscribe to these videos if you like them
4:10
And I'll see you guys in the next movie
