CSS Selectors Tutorial for Beginners

In this CSS selectors tutorial for beginners you will learn the types of CSS selectors and how CSS selectors are applied. You will also learn about the basics of cascade, specificity, and inheritance.

🚀 This lesson is part of a CSS for Beginners tutorial series playlist:

CSS Selectors Tutorial for Beginners

(00:00) Intro
(00:05) Welcome
(00:25) Setup
(01:01) Element selectors
(02:20) Class selectors
(03:42) ID selectors
(04:59) Group selectors
(06:25) Nested selectors
(08:11) Universal selector
(09:04) The Cascade
(10:01) Specificity
(11:10) Check your selectors in dev tools
(12:53) Inheritance
(14:11) You do not inherit from the universal selector
(14:44) More on inheritance
(17:11) Do not use this!
(19:01) Specificity calculator

⚙ Web Dev Tools:

📚 References:

✅ Follow Me:

Was this tutorial about CSS Selectors for beginners helpful? If so, please share. Let me know your thoughts in the comments.

#css #selectors #tutorial

[lltechnology]

Great tutorial. To help me remember the CSS specificity order, I use the mnemonic: ICE (ID, Class, Element).

[saoumoyaghosh]

I started with HTML tutorial and now got into css. Your content is elaborated, informative and keeps me glued to the video. Finding this channel is of the best thing happened to me in learning web development journey.
Thank you

[samirsamir]

it's very difficult to be a better teacher than Dave, we understand from the first reading, what pedagogy! Thank you for all your content, :=)

[ahmad-murery]

css selectors is like a game to me where I try to find the shortest way to target a specific element especially when there are more than one way to do that, and the lower the specificity score is the better so that it's easier to override it if necessary.

Thanks Dave,

[DH-jwth]

Dave, Not sure it was meant as humorous, but your “I want you to struggle to write good code rather than cheat” certainly got me laughing out loud!!!

[mostinho]

Done thanks
Can select by html tag (p, h1) or by class (and then the html element would have that class assigned) or by id (avoid doing this)
Can select multiple html tags like h1, h2 but if u don’t have the comma then it’ll select h2 that is inside an h1

Precedence ICE id then class then element

[dakoderii]

I'm going back over the basic stuff I know because you keep dropping tibits of wisdom that are hard to find elsewhere. You are very aware of what questions are popping up in a student's mind and the tricky challenges that will come along the way. I start making incredible progress in things once I understand how a system works.

Congrats on you're channel growing. I read a comment on this page from 2 years ago congratulating you on 20K something subscribers. Now it's at 292K!

[portiseremacunix]

thanks for the video. this channel has been the one for all for everything about web dev. great contents!

[osh]

This was a good refresher and also included a couple notes I never learned.

[lessorncoley]

Thank you so much, I was having difficulty figuring out how to add two class selectors in CSS and got the answer 2 minutes into the video.

[codingSparrow]

Sir, I really like your tutorials because you don't explain things superficially i.e. this element does this and that, but also give info. About good coding practices and important rules to remember that are not explained generally.

Really appreciate 👏👏👏 your tutorials and wish you all the best. ❤️❤️❤️

[Ariquel]

Finally found someone who explains well for beginners! Thanks!

[NinaGrace-zhko]

Ur teaching is so detailed. Thank u so much

[jshootsraw]

Dave you’re incredible. Thank you, just started a coding boot camp and this helped tremendously !

[Acksakal]

Good day, Mr. Gray. This is the first video of yours that I've watched and liked it! I also have one question: "How did you manage to give different colors to your TAG, CLASS and ID selectors?" in my vscode all types of selectors are of the same orange colors and I wanna change it

[CTILET]

The best way to learn programing is to learn on its native language.
And this channel is the best in this!

[VanPetersonKpoti]

What a great teacher!
We love you a lot.

[octoberman]

27k subscribers!! Should be more thumbs up 👍👍love your videos, for me being a newbie, I find the topics explained in a way I can retain and understand them much better than most instructors, thanks Dave and peace

[Grishopping]

Greetings DAVE, I know css but I am aware that I still have a lot to learn, that is why I am encouraged to see your videos that I know are very good. Att. Joseph Grillo

español
Saludos DAVE, yo conozco de css pero estoy consciente que me falta todavia mucho por aprender, por eso es que me estoy animando a ver tus video que se que son muy buenos. Att. Jose Grillo

[Diaianz]

Dude this I amazingly done. I know react, angular, node, next but I fucking suck at CSS...always used bootstrap/tailwind so this is great to know! Thanks for the amazing course