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

  • @DaveGrayTeachesCode
    @DaveGrayTeachesCode2 жыл бұрын

    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

  • @DH-jw4th
    @DH-jw4th2 жыл бұрын

    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

    @DaveGrayTeachesCode

    2 жыл бұрын

    Ha! That may be paraphrased but yes the struggle is worth it! 💯🚀🚀

  • @samirsamir7779
    @samirsamir777911 ай бұрын

    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 , :=)

  • @lltechnology4330
    @lltechnology43302 жыл бұрын

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

  • @DaveGrayTeachesCode

    @DaveGrayTeachesCode

    2 жыл бұрын

    Great suggestion! 💯🚀

  • @Valdaur

    @Valdaur

    2 жыл бұрын

    This has helped me remember the order of specificity. Thank you for leaving this here.

  • @kraken993

    @kraken993

    8 ай бұрын

    thank you for the mnemonic, its very useful!

  • @taniadinis4103

    @taniadinis4103

    7 ай бұрын

    Thanks!!

  • @jshootsraw
    @jshootsraw10 ай бұрын

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

  • @osh2023
    @osh20234 ай бұрын

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

  • @VanPetersonKpoti
    @VanPetersonKpoti8 ай бұрын

    What a great teacher! We love you a lot.

  • @ahmad-murery
    @ahmad-murery2 жыл бұрын

    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

    @DaveGrayTeachesCode

    2 жыл бұрын

    Gamification! That's always a good approach. Thanks, Ahmad! 💯

  • @lessorncoley763
    @lessorncoley7638 ай бұрын

    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.

  • @saoumoyaghosh8635
    @saoumoyaghosh8635 Жыл бұрын

    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

    @DaveGrayTeachesCode

    Жыл бұрын

    You're very welcome! 💯

  • @ryanakers3678

    @ryanakers3678

    2 ай бұрын

    HEY YOURE THAT GUY THAT GETS ALL THE PUSSY!

  • @TravinskiyVladislav
    @TravinskiyVladislav Жыл бұрын

    Thank you, Dave

  • @portiseremacunix
    @portiseremacunix2 жыл бұрын

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

  • @DaveGrayTeachesCode

    @DaveGrayTeachesCode

    2 жыл бұрын

    Thank you, Kirby!

  • @zrezaeimobin
    @zrezaeimobinАй бұрын

    Tnx for the great tutorial 👍👍👍👍👍👍

  • @videopresentation1469
    @videopresentation1469Ай бұрын

    great lesson

  • @fairytail6896
    @fairytail68966 ай бұрын

    A very well explained video, Sir.

  • @sebg2678
    @sebg2678 Жыл бұрын

    Thank you sir!

  • @dakoderii4221
    @dakoderii42213 ай бұрын

    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

    @DaveGrayTeachesCode

    3 ай бұрын

    Thank you!

  • @Ariquel
    @Ariquel Жыл бұрын

    Finally found someone who explains well for beginners! Thanks!

  • @DaveGrayTeachesCode

    @DaveGrayTeachesCode

    Жыл бұрын

    You're welcome!

  • @TeomunMete
    @TeomunMete6 ай бұрын

    Thanks

  • @sonamohialdin3376
    @sonamohialdin33762 жыл бұрын

    Awesome CSS tutorial thank you

  • @DaveGrayTeachesCode

    @DaveGrayTeachesCode

    2 жыл бұрын

    You're welcome! 💯

  • @octoberman104
    @octoberman1042 жыл бұрын

    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

    @DaveGrayTeachesCode

    2 жыл бұрын

    Thank you so much for the kind words 🙏 I'm glad I could help you 💯

  • @user-jc5tu4el4d
    @user-jc5tu4el4d Жыл бұрын

    Amazing video and full explain and understand able for me

  • @DaveGrayTeachesCode

    @DaveGrayTeachesCode

    Жыл бұрын

    Great to hear!

  • @mostinho7
    @mostinho7 Жыл бұрын

    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

  • @nourhamada1409
    @nourhamada14092 жыл бұрын

    Great tutorial 👏🏻👏🏻👏🏻

  • @DaveGrayTeachesCode

    @DaveGrayTeachesCode

    2 жыл бұрын

    Thank you! 💯🚀

  • @a7med2o6
    @a7med2o6 Жыл бұрын

    I love your tutorial your way of explanation is very easy and anyone can understand it easily

  • @DaveGrayTeachesCode

    @DaveGrayTeachesCode

    Жыл бұрын

    Glad to hear that, Ahmad! 💯

  • @GabrielSouza-yy2rq
    @GabrielSouza-yy2rq Жыл бұрын

    Once again, thanks a lot for your effort Dave!!

  • @DaveGrayTeachesCode

    @DaveGrayTeachesCode

    Жыл бұрын

    My pleasure!

  • @aragorn2753
    @aragorn2753 Жыл бұрын

    Great explanation as always

  • @DaveGrayTeachesCode

    @DaveGrayTeachesCode

    Жыл бұрын

    Thanks again!

  • @aytenchelebili2213
    @aytenchelebili2213 Жыл бұрын

    thank you for good expalining

  • @DaveGrayTeachesCode

    @DaveGrayTeachesCode

    Жыл бұрын

    You're welcome!

  • @Grishopping
    @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

  • @DaveGrayTeachesCode

    @DaveGrayTeachesCode

    Жыл бұрын

    Gracias!

  • @codingSparrow143
    @codingSparrow143 Жыл бұрын

    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

    @DaveGrayTeachesCode

    Жыл бұрын

    Thank you for the kind words, Heli!

  • @codingSparrow143

    @codingSparrow143

    Жыл бұрын

    @@DaveGrayTeachesCode 😊

  • @Acksakal
    @Acksakal8 ай бұрын

    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
    @CTILET2 жыл бұрын

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

  • @DaveGrayTeachesCode

    @DaveGrayTeachesCode

    2 жыл бұрын

    Thank you again for the kind words! 🙏🙏

  • @8m4an
    @8m4an2 жыл бұрын

    you are awesome !

  • @DaveGrayTeachesCode

    @DaveGrayTeachesCode

    2 жыл бұрын

    Thank you! 🙏

  • @khoka22
    @khoka22 Жыл бұрын

    Great Video. like this video and I learn from Bangladesh.

  • @DaveGrayTeachesCode

    @DaveGrayTeachesCode

    Жыл бұрын

    Glad to hear that! And hello👋 to Bangladesh!

  • @user-du2bj8pv4l
    @user-du2bj8pv4l2 жыл бұрын

    just dont know how to thank you! . may g-d bless you

  • @DaveGrayTeachesCode

    @DaveGrayTeachesCode

    2 жыл бұрын

    Thank you for the kind words! 🙏🙏

  • @rapixstudio
    @rapixstudio Жыл бұрын

    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

    @DaveGrayTeachesCode

    Жыл бұрын

    Sorry to hear that, but I do not think I have control over the subtitle languages that KZread provides.

  • @user-ru6fz1yy8g
    @user-ru6fz1yy8g2 ай бұрын

    Why can't we do styling in html file.... itself?

  • @mihaelacostea5783
    @mihaelacostea578310 ай бұрын

    Where can we find the specificity calculator as it is not in the resources?

  • @DaveGrayTeachesCode

    @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.

  • @lecturesfromleeds614
    @lecturesfromleeds61411 ай бұрын

    Monospace looks better, it reminds me of those vintage video games

  • @confidential303
    @confidential303 Жыл бұрын

    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

    @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.

  • @developerashed610
    @developerashed6102 жыл бұрын

    Hello and welcome😊 hi I am rashed😊

  • @DaveGrayTeachesCode

    @DaveGrayTeachesCode

    2 жыл бұрын

    Hi Rashed! 👋

  • @fabrice9848
    @fabrice98482 жыл бұрын

    Why should we avoid using the ID selector ?

  • @DaveGrayTeachesCode

    @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.

  • @yavuzselimoksuz6795
    @yavuzselimoksuz679511 ай бұрын

    It twice

  • @5amsa
    @5amsa Жыл бұрын

    wow

  • @djlipua9327
    @djlipua932728 күн бұрын

    How to merge css and html

  • @mkmkmkmk6294

    @mkmkmkmk6294

    22 күн бұрын

    Use below tag in your html file.

  • @ruslangilyazov7733
    @ruslangilyazov773314 күн бұрын