CSS Selectors Tutorial for Beginners
Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
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.
🚩 Subscribe ➜ bit.ly/3nGHmNn
🚀 This lesson is part of a CSS for Beginners tutorial series playlist:
• CSS Tutorials for Begi...
🔗 All Resources for this CSS Tutorial Series: github.com/gitdagray/css_course
📬 Course Updates ➜ courses.davegray.codes/
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:
Chrome Browser: www.google.com/chrome/
Visual Studio Code (VS Code): code.visualstudio.com/
Live Server VS Code Extension: marketplace.visualstudio.com/...
vscode-icons VS Code Extension: marketplace.visualstudio.com/...
Github Themes VS Code Extension: marketplace.visualstudio.com/...
W3C CSS Validator: jigsaw.w3.org/css-validator/
Specificity Calculator: specificity.keegan.st/
📚 References:
MDN CSS: developer.mozilla.org/en-US/d...
MDN CSS Basics: developer.mozilla.org/en-US/d...
MDN CSS Selectors: developer.mozilla.org/en-US/d...
✅ Follow Me:
Github: github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
Blog: yesdavidgray.com
Reddit: / daveoneleven
Was this tutorial about CSS Selectors for beginners helpful? If so, please share. Let me know your thoughts in the comments.
#css #selectors #tutorial
Пікірлер: 80
One of the first stops on your journey towards learning CSS is to learn the most common CSS selectors. CSS selectors allow you to select the parts of the HTML document that you want to apply CSS styles to. Just starting to learn CSS? I suggest going to the beginning of this CSS for Beginners playlist here: kzread.info/head/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit
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!!!
@DaveGrayTeachesCode
2 жыл бұрын
Ha! That may be paraphrased but yes the struggle is worth it! 💯🚀🚀
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 , :=)
Great tutorial. To help me remember the CSS specificity order, I use the mnemonic: ICE (ID, Class, Element).
@DaveGrayTeachesCode
2 жыл бұрын
Great suggestion! 💯🚀
@Valdaur
2 жыл бұрын
This has helped me remember the order of specificity. Thank you for leaving this here.
@kraken993
8 ай бұрын
thank you for the mnemonic, its very useful!
@taniadinis4103
7 ай бұрын
Thanks!!
Dave you’re incredible. Thank you, just started a coding boot camp and this helped tremendously !
This was a good refresher and also included a couple notes I never learned.
What a great teacher! We love you a lot.
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,
@DaveGrayTeachesCode
2 жыл бұрын
Gamification! That's always a good approach. Thanks, Ahmad! 💯
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.
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
@DaveGrayTeachesCode
Жыл бұрын
You're very welcome! 💯
@ryanakers3678
2 ай бұрын
HEY YOURE THAT GUY THAT GETS ALL THE PUSSY!
Thank you, Dave
thanks for the video. this channel has been the one for all for everything about web dev. great contents!
@DaveGrayTeachesCode
2 жыл бұрын
Thank you, Kirby!
Tnx for the great tutorial 👍👍👍👍👍👍
great lesson
A very well explained video, Sir.
Thank you sir!
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!
@DaveGrayTeachesCode
3 ай бұрын
Thank you!
Finally found someone who explains well for beginners! Thanks!
@DaveGrayTeachesCode
Жыл бұрын
You're welcome!
Thanks
Awesome CSS tutorial thank you
@DaveGrayTeachesCode
2 жыл бұрын
You're welcome! 💯
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
@DaveGrayTeachesCode
2 жыл бұрын
Thank you so much for the kind words 🙏 I'm glad I could help you 💯
Amazing video and full explain and understand able for me
@DaveGrayTeachesCode
Жыл бұрын
Great to hear!
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
Great tutorial 👏🏻👏🏻👏🏻
@DaveGrayTeachesCode
2 жыл бұрын
Thank you! 💯🚀
I love your tutorial your way of explanation is very easy and anyone can understand it easily
@DaveGrayTeachesCode
Жыл бұрын
Glad to hear that, Ahmad! 💯
Once again, thanks a lot for your effort Dave!!
@DaveGrayTeachesCode
Жыл бұрын
My pleasure!
Great explanation as always
@DaveGrayTeachesCode
Жыл бұрын
Thanks again!
thank you for good expalining
@DaveGrayTeachesCode
Жыл бұрын
You're welcome!
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
@DaveGrayTeachesCode
Жыл бұрын
Gracias!
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. ❤️❤️❤️
@DaveGrayTeachesCode
Жыл бұрын
Thank you for the kind words, Heli!
@codingSparrow143
Жыл бұрын
@@DaveGrayTeachesCode 😊
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
The best way to learn programing is to learn on its native language. And this channel is the best in this!
@DaveGrayTeachesCode
2 жыл бұрын
Thank you again for the kind words! 🙏🙏
you are awesome !
@DaveGrayTeachesCode
2 жыл бұрын
Thank you! 🙏
Great Video. like this video and I learn from Bangladesh.
@DaveGrayTeachesCode
Жыл бұрын
Glad to hear that! And hello👋 to Bangladesh!
just dont know how to thank you! . may g-d bless you
@DaveGrayTeachesCode
2 жыл бұрын
Thank you for the kind words! 🙏🙏
Hi Dave. Unfortunately, the Turkish subtitle option does not work in the CSS series, is it possible to activate it? I follow you and I find your content very instructive and educational. thanks
@DaveGrayTeachesCode
Жыл бұрын
Sorry to hear that, but I do not think I have control over the subtitle languages that KZread provides.
Why can't we do styling in html file.... itself?
Where can we find the specificity calculator as it is not in the resources?
@DaveGrayTeachesCode
10 ай бұрын
Follow the link in the description that says "All resources for this CSS course" and then look under "Free Web Dev Tools" on that page.
Monospace looks better, it reminds me of those vintage video games
He Dave, a mathematical question about the specificity calculator. You showed that ID has a score of 100 and a class has 10 points.. but 2 nested classes will get 20 points.. so in theory what if I have 11 nested classes ..then you will get a score of 110 which is higher then 100. Or is the total points just made up by the developer :D.. and ID in any case will enjoy highest priority
@DaveGrayTeachesCode
Жыл бұрын
Good question! You can use the specificity calculator linked to in the course resources - or just here: specificity.keegan.st/ - to compare two different selectors. It will show you that an element with 11 classes on it actually gets a score of: 0 11 0 ...and this allows an ID selector to still outrank it with a score of: 1 0 0 ...so the math doesn't carry the columns as a traditional equation.
Hello and welcome😊 hi I am rashed😊
@DaveGrayTeachesCode
2 жыл бұрын
Hi Rashed! 👋
Why should we avoid using the ID selector ?
@DaveGrayTeachesCode
2 жыл бұрын
It works, but it is not common practice. Styles are usually applied with classes. Later in this series, I cover the BEM naming convention that uses classes. Also, modern libraries/frameworks like Bootstrap and Tailwind use classes.
It twice
wow
How to merge css and html
@mkmkmkmk6294
22 күн бұрын
Use below tag in your html file.