Up next in 10
CSS Selectors, class, id, Universal Selector | CSS Course for Beginners
705 views
Oct 10, 2024
CSS Course for Beginners: CSS Selectors. In this video, you'll learn about CSS Selectors, class, id, and Universal Selector. CSS tutorial: https://www.tutorialspoint.com/css/index.htm Get Certification in Web Development: https://www.tutorialspoint.com/certification/web-developer-guide-for-2022/index.asp Use coupon ""YOUTUBE12"" to get “FLAT 12%’’ OFF at Checkout. Quality Learning to UPSKILL yourself only at TutorialsPoint. Timestamps: 00:00 Introduction 00:09 CSS selectors 02:44 class selector 06:19 id selector 10:04 class vs id selector 10:43 universal selector In this CSS course for beginners, you’ll learn important CSS concepts step by step to help build beautiful, responsive websites. This series will cover essential topics like Flexbox, Positioning, the Box Model, Layout, Typography, Colors, Project, and more to help you master web design. Whether you're new to coding or looking to refine your skills, this course will guide you through each concept simply, ensuring a strong foundation in CSS. Tutorialspoint, a leading ed-tech platform, offers Simply Easy Learning at affordable prices. Check out more Trending Courses to Learn: http://bit.ly/3KBW32w Subscribe to our Channel to get more related updates and turn on the notification:
View Video Transcript
0:00
Hello and welcome to Tutorials Point
0:02
In this video, we will learn about CSS selectors. So without wasting time, let's get started
0:08
There are actually many types of CSS selectors, but we are going to talk about simple selectors for now
0:14
So firstly, I'm going to talk about the element selector that we have already just practiced it
0:19
For example, in our index.html, we have this H1 tag. And we wanted to apply some style declaration that we already did, that is, having this purple color and aligning the text to the
0:29
center. So how did we achieve this? We basically were in our
0:33
style.css and there we directly targeted this H1 tag. So if I go to
0:38
style.csses, we directly wrote H1 and then inside the curly braces we wrote
0:43
the style declaration for color and as well as for the text align to be
0:47
centered. Right. So this is the first way. This is the first
0:51
selector where we directly target the specified HTML elements. Alright. Next we have another type of CSS selector and we call
0:59
it as class selector. Now what do I mean by that? Let me go to index.hdml and here I'm just going
1:07
to create some multiple devs. So let's go down and here I'm going to create a simple
1:15
deal. All right. Now inside this dev I have something maybe a H4 saying this is my let's say
1:24
first div. All right. Then we have similarly another div. And inside this div we have some H5 text
1:33
Let's say this is a second deal. All right. So if I save it, as you can see, both of the divs appear here
1:43
All right. Now, what will I do if I want to target this div
1:47
I will simply use this element to target, right? So I will go to style.cass
1:52
Now here I'm going to target the divs. So I'll simply write there, all right, name of the element and then some style declaration
1:59
For example, I want the background color of this div to be brown
2:04
So if I hit save, as you can see, the devs are brown. Right
2:08
So I also want it to be a bit less. Let's say 300 pixels
2:14
So they are 300 pixels. Let's give them some height also. So I'll give it a height of, let's say, 200 pixels
2:20
As you can see, we have these two devs. Let's give them a color so that we can see the text
2:25
So I'll simply write color and hash f f f, which means white
2:29
We will shortly get to colors and then you will understand what I mean by this hash
2:34
For now understand it is equivalent to this white right here. All right
2:38
So I'll save it and as you can see the colors inside is white now
2:42
Now we need to understand. We are targeting both the dews. What if I want to target this first dove only
2:49
What if I want to give a different color to this div and to this div as well Right As you can see when we target a dew element both of these dev gets targeted But we only want to target one div right So in this case what we are going to do is I go back to index
3:06
Now, let's say that I want to target this deal, having this H4 text of this is my first div
3:12
So I'm going to give it a class. So right here, the starting tag, the starting new tag, here I'm going to have an attribute
3:19
And this attribute is called class. class equals to and then inside here we are going to specify any name that we want to give
3:28
For example, I'll give this a name of first dev and I'll save it
3:34
Nothing will happen for now. But remember that we gave our first div a class of first due itself, right
3:42
You can name anything, right? Now, how to target this class? I'm going to go into style.cass
3:49
I want to target this first due only, right? This one. So I'm going to go into style.cass and write here, just after this, I'm going to say first deal
4:03
But if we go back, as you can see, this is a class. When we target elements direct, at that time, we write simply due
4:12
But when we target a class, right? When we target a class-based element, what we do is we specify a element
4:19
period so I'll write period and then name of the class that is first to do and then curly braces and inside we will have our declaration for example I want to give a different color to this first due right so I'll simply say background color or let's say blue okay now once I save it see the first due changes its color to blue so this is how we can target multiple devs right with the help of class
4:49
similarly I am going to give this div also a class so I'll write class equals to and then inside quotes
4:57
I'm going to write something called as second dev I'll save it and now I will target this second div
5:04
so I'll simply write period then second div and inside second dev I will write background color
5:12
of let's say this aqua I will save it and as you can see it becomes aqua color
5:19
This color doesn't look really nice to my eyes. So let's try something else, maybe green for now
5:26
I'll save it and now this is a green color div. Now you saw how we can target these divs with the help of class
5:34
And in fact, we can target any element with the help of this class. I can also give a class to this H4
5:40
I can also give a class to this H5 to this A tag anywhere. All right
5:44
So this is another type of selector called as class selectors Now we can remove this background because we have already specified the backgrounds for both of the divs So I just remove it and save it As you can see Now for example I want the second div width to be different It 300 pixels right
6:03
But I want its width to be, let's say, 500 pixels. I'll save it. And as you can see, the second div gets its width changed to 500 pixels
6:14
All right. So this is all about CSS class selectors. Next up
6:19
There is a third type of simple CSS selector that is called as an ID selector
6:24
Now, how do we know what an ID selector is? Now, we can use classes, right
6:29
We have this, as you can see, period first day of period, second day. We can give class to any element in our HTML
6:36
Now, why should we use ID? Let's first talk about what ID is
6:40
So, ID is used to target elements for one specific unique property, you can say
6:46
All right? The idea of an element must be unique for every. page what I mean by that for example we have this paragraph I want to target this
6:54
paragraph as you can see I have already done it here using this paragraph text
6:59
but a good practice here would be to give it a class of let's say my paragraph
7:07
right now I'm going to just copy it quickly and we will target this my paragraph now
7:14
instead of this p I am going to write here full stop my paragraph and save it at a
7:19
As you can see, it works fine. If I want to increase the text size, let's say 40. As you can see, the text size increases
7:25
Let's keep it to something like 30 that it was already. Now, for example, I want to target some portion of this text
7:34
For example, I want to target these words. I don't know what they mean, but they are there
7:39
We want to target these words. How can we? What I'm going to do is I'll go back to index
7:45
HTML and I'll look for these words. For example, here are these words
7:50
I'm going to wrap them inside a span element. You may have already known about it
7:54
So I'll write span and hit enter and we have a span element and I'm going to just cut and paste it here, something like this
8:01
Nothing happens. All right. Now, span is just used to target some random stuff in your HTML
8:07
Don't worry about it. We'll talk about it later on. Now, I'll go to style.cass
8:12
How will I target this span? One way is to give it a class
8:16
Alright, one way is to give it a class. But remember this rule of thumb
8:21
If you want to target multiple elements, if you have multiple elements like this
8:26
where you want to have a span and then you put on a class, it will be fine
8:30
But what if you only have this one span in your whole web page
8:34
This time you will write ID. So I'll write ID equals to
8:39
and I'll say special text. Special and then text. I will save it
8:46
Now I going to target this ID based element and how will I do that I will go to style vocabulary and here to target an ID based element And how will I do that I will go to style and here to target an ID based element we already know for class we use period right Period and then name of the class
9:00
Similarly, for our IDs, we are going to use a hash. So I'll write here something like hash and then
9:08
name of the ID. So in our index.t. HTML, what is the name of ID? It is special text. I am going to
9:14
copy it and then here I am going to paste it. So special text and then we can use our
9:21
CSS declaration. So for example I want the color to be changed. So I'll write color
9:25
red. If I save it as you can see this becomes red color. Similarly let's say I want the
9:33
font style to be italic. I'll save it as you can see it becomes italic. Let's give it
9:42
some font weight, I want the font weight to be bold and I save it and as you can see the font weight
9:47
is bolder. So this is how we can use ID in our HTML to target some specific unique element
9:56
all right and then to target it we use a hashtag followed by the ID name. All right now you may
10:04
be confused when to use class and when to use ID. So the general rule of thumb is here
10:11
that if there is more than one element which requires the same styling, then use classes
10:17
But if there is only one element inside our HTML that has some unique styling needed
10:24
then we use an ID, alright? Otherwise, if we have more than one elements that require the same styling
10:29
at that point we use classes. If you are still confused between this class and ID, don't worry
10:35
Just remember what I said and then later on when we start doing some mini projects
10:39
you will easily understand when to use class. and when to use ID. Also, I'm going to quickly show you, let me go to style.cass
10:46
There is also a universal selector that selects the entire HTML. So all of this HTML document will be selected if we go to style.cass and I'm going to write star and then curly braces
10:59
And whatever I want to write here will be applied to whole of my web page
11:04
So this star is basically a universal CSS selector. So for example, I want the background color of my whole
11:11
whole web page to be black. Now if I save it, you see the whole will turn black. So I'll
11:16
write save and as you can see whole of this web page is black. Of course the text is in blacks
11:21
That's why it is not visible, right? We can do something else. For example, pink. As you can see
11:26
the whole web page becomes pink. So this is a universal select. That will be enough for this
11:32
video. In the next video, we will learn about CSS borders and CSS colors. So make sure to
11:38
subscribe to the channel. Hit that like button and I will I'll see you in the next video