CSS Selectors Tutorial for Beginners
ฝัง
- เผยแพร่เมื่อ 27 มิ.ย. 2024
- 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
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: th-cam.com/play/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit.html
Great tutorial. To help me remember the CSS specificity order, I use the mnemonic: ICE (ID, Class, Element).
Great suggestion! 💯🚀
This has helped me remember the order of specificity. Thank you for leaving this here.
thank you for the mnemonic, its very useful!
Thanks!!
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 , :=)
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
You're very welcome! 💯
HEY YOURE THAT GUY THAT GETS ALL THE PUSSY!
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,
Gamification! That's always a good approach. Thanks, Ahmad! 💯
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!!!
Ha! That may be paraphrased but yes the struggle is worth it! 💯🚀🚀
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.
thanks for the video. this channel has been the one for all for everything about web dev. great contents!
Thank you, Kirby!
What a great teacher!
We love you a lot.
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!
Thank you!
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.
Thank you, Dave
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
Finally found someone who explains well for beginners! Thanks!
You're welcome!
Thank you sir!
Awesome CSS tutorial thank you
You're welcome! 💯
A very well explained video, Sir.
great lesson
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
Tnx for the great tutorial 👍👍👍👍👍👍
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
Thank you so much for the kind words 🙏 I'm glad I could help you 💯
I love your tutorial your way of explanation is very easy and anyone can understand it easily
Glad to hear that, Ahmad! 💯
Great tutorial 👏🏻👏🏻👏🏻
Thank you! 💯🚀
thank you for good expalining
You're welcome!
Great explanation as always
Thanks again!
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. ❤️❤️❤️
Thank you for the kind words, Heli!
@@DaveGrayTeachesCode 😊
Amazing video and full explain and understand able for me
Great to hear!
Thanks
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
Gracias!
Once again, thanks a lot for your effort Dave!!
My pleasure!
The best way to learn programing is to learn on its native language.
And this channel is the best in this!
Thank you again for the kind words! 🙏🙏
Great Video. like this video and I learn from Bangladesh.
Glad to hear that! And hello👋 to Bangladesh!
you are awesome !
Thank you! 🙏
just dont know how to thank you! . may g-d bless you
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
Sorry to hear that, but I do not think I have control over the subtitle languages that TH-cam provides.
Monospace looks better, it reminds me of those vintage video games
Why can't we do styling in html file.... itself?
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
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.
Where can we find the specificity calculator as it is not in the resources?
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.
Why should we avoid using the ID selector ?
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.
Hello and welcome😊 hi I am rashed😊
Hi Rashed! 👋
wow
How to merge css and html
Use below tag in your html file.
It twice