Up next in 10
CSS Tutorial For Beginners 26 - The Universal Selector
449 views
Feb 7, 2024
In this CSS tutorial tailored for beginners, viewers are introduced to the universal selector, a versatile tool for targeting all elements on a webpage. The video likely covers the syntax and usage of the universal selector, denoted by the asterisk (*), demonstrating how it can be used to apply styles to all elements within a document. Viewers can expect to learn how to use the universal selector in combination with other selectors to reset default styles, apply global styles, or set default styles for specific elements. Practical examples and demonstrations may be included to illustrate the various applications of the universal selector in CSS styling. This tutorial serves as a valuable resource for beginners seeking to gain more control over the styling of their web pages using CSS.
View Video Transcript
0:00
Yo guys, what the hell is going on
0:09
This is CSS for beginners lesson 26 and in this video we're going to talk about the
0:14
Universal Selector. That's coming up. Okay so you may be sitting there right now thinking what the hell was that about
0:24
Why has he just said Universal Select in such a godly manner and the reason my friends is this, it is
0:29
God selector. It's the mother of all selectors, one selector to rule them all. That's how powerful it is
0:36
And essentially, what the Universal Selector does is select every tag on the page. So we can style every tag or every element within one rule
0:46
And it looks like this. A star. That's it. That's the Universal Selector. Quite fitting, I believe, because a star is quite godly and heavenly
0:56
And within this, my friends, we can style everything. Every time. tag imaginable it would be akin to doing something like this article P L I UL
1:06
DIV H1 H2A etc etc there's too many tags to write but essentially if
1:13
we were to write every single HTML element here and then style it that would be the
1:18
same as writing this here a tiny little star so this is much easier and that's how
1:24
powerful it is so what can we do with this well we can do anything we want
1:29
and I am going to colour everything blue because I'm feeling quite manic
1:35
So let's have a look at this in a browser. And there we go everything on the pages blue that is awesome I might do a website like this We got a blue heading blue text blue link blue items heading text etc etc
1:55
Okay? So that there, that selector, that little star, the universal selector, has targeted every element and it has colored it blue
2:05
Now, this is not to be confused with inheritance. All the elements are not inheriting this style
2:12
it's not like going like this body and then coloring everything blue in the body because
2:20
remember if we do this then every element will kind of inherit this body element this
2:28
this body rule and color them blue unless they are explicitly styled otherwise
2:32
overridden okay so let's just view this in a browser oops And you might be sitting there saying, well, there's no change
2:45
And you're right, there's no change. Okay, but check this out. First of all, what I want to do is go back to our star and color everything red
2:55
Okay. And then we'll view this in a browser just so you can see this as well in case you don't believe what it's doing
3:03
Everything's red there, yeah? Every element. Okay, let's go back and do the body here, the body selector, and say that every element will in direct play
3:12
now inherit this style okay so you're thinking well that should be the same the blue
3:17
is the same right so why shouldn't this be the same well let's have a look oh we've
3:26
missed something this here is still blue now why is that the universal selector targeted every element and it colored them individually blue that wasn inherited it targeted every element directly now when we give a rule to the
3:42
body selector what we're doing is passing that rule on through all the child and
3:47
descendant selectors indirectly it's inheriting those rules now remember default browser styling well that there is overriding this a rule here so
3:58
it's the a is inheriting this body rule of coloring it red
4:02
but then the default browser style is going, hey, I've got a rule for A's myself
4:07
So I'm going to color it blue. I don't care what you've inherited. I'm going to color it blue. Okay
4:11
However, the universal selector overrides that. That is selecting the A tag directly, as well as the P tag directly, as well as the NI tag directly
4:21
Okay, so those are not inherited. So that is the one important difference between inheritance and the universal selector
4:28
All right, then, so why would you ever use this? Well, it's a good question and a lot of developers kind of shy away from it
4:36
And that's because of the sheer power of it. You know, they don't often want to target every single element and give it identical styles
4:44
But some people, they create what's called a CSS reset. Now, I'm not going to get into too much detail about what a CSS reset is now
4:51
But essentially, CSS reset is a way of stripping out all the default browser styles
4:57
So you can apply your own styles. So there's no kind of conflicts or you're not getting blue links where you don't want them or margins or paddings or anything like that where you don't want them
5:06
So what they generally do is put this universal selector at the top of their CSS
5:11
Starsheet or in a separate style sheet altogether and they do something like this. I don't know
5:16
strip out all the margins Strip out Oops all the padding Zero and I don know call everything black and this is a simplistic version you know a CSS reset gets into a little more detail than
5:33
this, and I may do a video on this in the future, but for now, let's keep it to this simple example
5:39
And if we do that and then open it up in a browser, then we'll see that now all the padding
5:50
and the margins around each element and the color of the links
5:53
they've been stripped off. So we've got like a blank canvas, if you like. Everything's uniform, and then we can go and style it how we want
6:00
And we're not got those default browser styles interfering with anything. So that's why people would use it
6:07
I will advise that you err on the side of caution when you use it. Okay
6:12
Don't just kind of throw anything you like in there, because don't forget, you always have to override those styles
6:18
because those styles are going to run through everything. So you may forget certain elements in the future to style something
6:25
And then this is going to rear its ugly head and take away its margin, takeaway its padding
6:30
And sometimes those default styles are quite good that the browser implements
6:34
They're there for a reason. Okay, so be careful with it. I'm not saying don't use it
6:38
Feel free to use it in your own CSS resets or whatever. But just be careful with it
6:43
Okay, then, so that there is the Universal Selector. If you have any questions about it whatsoever
6:48
feel free to comment down below. And we'll answer all of those as soon as I can
6:52
Otherwise, please subscribe, like and share this video, and I'll see you guys in the next one
#Skins
# Themes & Wallpapers