Web Dev Roadmap for Beginners (Free!): https://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 https://bit.ly/3nGHmNn
This lesson is part of a CSS for Beginners tutorial series playlist:
https://www.youtube.com/playlist?list=PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit
All Resources for this CSS Tutorial Series: https://github.com/gitdagray/css_course
Course Updates https://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: https://www.google.com/chrome/
Visual Studio Code (VS Code): https://code.visualstudio.com/
Live Server VS Code Extension: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
vscode-icons VS Code Extension: https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons
Github Themes VS Code Extension: https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme
W3C CSS Validator: https://jigsaw.w3.org/css-validator/
Specificity Calculator: https://specificity.keegan.st/
References:
MDN CSS: https://developer.mozilla.org/en-US/docs/Web/CSS
MDN CSS Basics: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics
MDN CSS Selectors: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors
Follow Me:
Github: https://github.com/gitdagray
Twitter: https://twitter.com/yesdavidgray
LinkedIn: https://www.linkedin.com/in/davidagray/
Blog: https://yesdavidgray.com
Reddit: https://www.reddit.com/user/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