Up next in 10
CSS Tutorial For Beginners 09 - Targeting Classes and ID's
746 views
Feb 7, 2024
In this CSS tutorial geared towards beginners, viewers delve into targeting classes and IDs, crucial concepts in web development for styling HTML elements precisely. The video likely covers the syntax and usage of class and ID selectors in CSS, explaining how to apply styles to specific elements based on their assigned class or ID attributes. Viewers can expect to learn the differences between classes and IDs, as well as best practices for naming and applying them in their HTML markup. This tutorial serves as an essential guide for beginners seeking to enhance their CSS skills by mastering the targeting of classes and IDs to create more customized and visually appealing web pages.
View Video Transcript
0:00
What's up Ninjas? I'm Sean from the Net Ninja and this is CSS for Beginners Lesson 9
0:11
Targeting Classes and IDs. So before we start I just want to have a quick recap
0:16
on what classes and IDs are. Now both essentially are a way to describe your
0:21
content, a way of giving it meaning and semantics and the only difference is
0:25
that a class can be used multiple times on a page and an ID can only be used
0:29
once per page. Quick examples you might have an article page and below that some
0:34
comments from the user and say you've got five or six comments. Imagine in the
0:38
HTML each of these comments is surrounded by a div tag. Now you can give
0:42
each of these div tags a class of comment for example. Okay so there's
0:46
multiple classes on one page. Now an ID can only be used once so an example of
0:50
that could be a header. So on the page you've got a logo, you've got a title and
0:56
you've got a navigation. You could surround all of those elements with a div tag and give that div tag an ID of page header because there's only one of
1:03
those on the page. Now if you want to learn more about IDs and classes you can
1:08
do that by checking out my video in the beginners HTML course. I'll leave a link
1:12
to that in the description below. Otherwise for the rest of us we're going
1:16
to carry on into the HTML and start adding some rules with classes and IDs
1:21
So here I am back in the HTML and the first thing you'll notice is that I've
1:25
ripped out all of these CSS styles that we did in the last lesson. I've also
1:29
added a couple of tags. We've got this h2 within the header. We've got this h2
1:33
here with an ID of content header and I've added some span tags here with a
1:37
class of deck. Now we learned in the last lesson that we could target elements and
1:43
we're going to do that first. We're going to say h2 and we're going to give them a
1:48
font size of 24 pixels. Okay and now we know that that is going to say hey go
1:56
find every h2 in the page and style them this way. Give them all a font size of 24
2:01
pixels. So it's going to look for this h2 and it's going to find this h2 as well
2:04
Style them exactly the same. Now we might not want that. We might want this h2 here
2:10
to be slightly different. A bit smaller maybe because it's not in the header and
2:14
we can do that. We can target it using this ID. So the way we do this is by
2:20
starting our selector with a hash symbol or a pound sign. However you want to call
2:25
this little symbol here. We always start an ID selector with that. That says to
2:30
the CSS hey this is an ID that I'm looking for and then what we do is we
2:34
put the ID name which in this case is content header. So I'll just write that
2:40
in content header and then that is saying to the CSS look I'm looking for
2:45
an ID because I'm using this hash symbol and the ID I'm looking for is content
2:50
header which is here. So go and grab that element there and then let me style that
2:54
in the declaration which I'm going to do now. So I'll open my curly braces and
2:58
close them and then I'm going to give these a smaller font size which is going
3:02
to be 18 pixels and you know what I also want to give these a color of red. So
3:10
what we're doing here is overriding this h2 style. Okay the CSS works from top to
3:16
bottom so it starts here at the top it says okay I found all these h2's this
3:21
one here and this one here and we're going to give them a font size of 22 pixels. Then it finds this rule here which I've just minimized and it says
3:31
okay well I've got this ID symbol here so I'm going to go find an ID of content
3:36
header which is h2 and I'm going to override this h2 rule by giving it a
3:41
font size of 18 pixels and then a color of red. So let's save that now make sure
3:46
it's worked I'm going to open up the content contact page in a browser in
3:51
Google Chrome and there we go this is the h2 in the header and this is the h2
3:59
with an ID of content header which is red and smaller so that's worked
4:03
brilliant so that's how IDs work. Now the next thing we're going to do is look at
4:08
classes and to do this we're going to make use of these span tags here that
4:13
I've given a class of deck. Now first again we're going to style them all in
4:18
one rule by targeting the span elements and again that's saying look go and find
4:22
every span tag on that page which is all of these four here and style them this
4:27
way and I'm going to make them display block you won't know what this means yet
4:32
but don't worry about it and give them a color of blue so all the span tags
4:38
display block and give them a color of blue so I'm going to open this up again
4:42
in a browser take a look first of all Google Chrome and there they are these
4:50
four here these are the span tags they're all blue and displaying block now display block just means let them all display on a new line essentially
4:57
you don't need to learn about that yet I'm going to cover it later but just
5:01
bear in mind that that span rule that we've just applied is targeting all of
5:05
the spans okay now what we want to do is style these class ones differently and
5:11
to do that we can apply a CSS rule which targets this class here and because
5:16
there's multiple classes of deck it's going to grab every element with a class
5:20
of deck and style it the same so the way we do this the way we style a class tag
5:26
is to start it with a period or full stop depending on where you're from that
5:31
says to the CSS hey whatever comes next is a class name okay and the class name
5:36
is deck and that's it that's a class so the CSS is going to look for every class
5:43
of deck on this page and it wouldn't just be these spans I could give this P
5:47
a class of deck as well if I wanted to and it would also style this but we're
5:53
not going to do that for now we'll just get rid of that and we're just going to style these here so what I'm going to say is I want to color these red so the
6:04
bottom three spans here should be red and the top one still blue because we've not overridden that that still applies here so we'll save that and have a view
6:12
in the browser and there we go the top span tag is still blue and the bottom
6:22
three with a class of deck yo I'm a span tag too this is a deck of spans I like
6:26
spandex they're all red so hopefully now you know how to create a ID in a CSS
6:35
rule you just put the hash or pound sign at the start and then the name of the ID
6:40
and then do your declaration and you also know how to target a class you just
6:45
put a period or full stop however you want to call it at the start and then
6:49
the class name which is deck in this case and then you style it in the
6:52
declaration so if you have any questions whatsoever feel free to comment below
6:57
I'll answer all of those as soon as possible don't forget to subscribe if
7:02
you like these videos there's another one coming very soon I'll see you guys in that one in the next movie
#Skins
# Themes & Wallpapers