These CSS features give us more control on the cascade and specificity

Kevin Powell ยท Beginner ยท๐Ÿ› ๏ธ AI Tools & Apps ยท2y ago
Looking to step up your CSS? I have free and premium courses ๐Ÿ‘‰ https://kevinpowell.co/courses?utm_campaign=general&utm_source=youtube&utm_medium=moderncascade A very big thank you to Geoff Graham for his help in making this video possible! https://geoffgraham.me/ ๐Ÿ”— Links โœ… More on svh/dvh/lvh: https://youtu.be/ru3U8MHbFFI โœ… More on specificity: https://youtu.be/c0kfcP_nD9E โœ… More on :is() :where() and :has(): https://youtu.be/3ncFpP8GP4g โœ… More on layers: https://youtu.be/NDNRGW-_1EE โœ… More on feature queries @support: https://youtu.be/wPI8CEoheSk โœ… Browser support for :has(): https://caniuse.com/css-has โœ… Browser support for layers: https://caniuse.com/mdn-css_at-rules_layer โœ… Browser support for @scope: https://caniuse.com/css-cascade-scope โŒš Timestamps 00:00 - Introduction 01:40 - Order basics 03:10 - Debugging order 04:18 - Order linting 05:55 - Invalid declarations & debugging them 07:40 - Using order and invalid declarations on purpose 10:26 - Feature queries @supports 12:45 - Specificity intro 13:45 - Specificity basics 15:18 - Debugging specificity 16:40 - Modern selectors impact on specificity 24:00 - Cascade Layers introduction 24:38 - Cascade Layers basics 27:25 - Debugging layers 28:45 - Declaring layers before using them 31:28 - The impact of !important on layers 33:30 - Combining layers with โ€œunlayeredโ€ styles 34:28 - Introduction to scope 36:04 - Scope basics 40:50 - Using scope with style elements inside an element #css -- Come hang out with other dev's in my Discord Community ๐Ÿ’ฌ https://discord.gg/nTYCvrK Keep up to date with everything I'm up to โœ‰ https://www.kevinpowell.co/newsletter Come hang out with me live every Monday on Twitch! ๐Ÿ“บ https://www.twitch.tv/kevinpowellcss --- Help support my channel ๐Ÿ‘จโ€๐ŸŽ“ Get a course: https://www.kevinpowell.co/courses ๐Ÿ‘• Buy a shirt: https://teespring.com/stores/making-the-internet-awesome ๐Ÿ’– Support me on Patreon: https://www.patreon.com/kevinpowell --- My editor: VS Code - https://code.visualst
Watch on YouTube โ†— (saves to browser)
Sign in to unlock AI tutor explanation ยท โšก30

Playlist

Uploads from Kevin Powell ยท Kevin Powell ยท 0 of 60

โ† Previous Next โ†’
1 How to create an awesome navigation bar with HTML & CSS
How to create an awesome navigation bar with HTML & CSS
Kevin Powell
2 Improve your CSS by Keepin' it DRY
Improve your CSS by Keepin' it DRY
Kevin Powell
3 HTML & CSS for Beginners Part 6: Images
HTML & CSS for Beginners Part 6: Images
Kevin Powell
4 HTML & CSS for Beginners Part 7: File Structure
HTML & CSS for Beginners Part 7: File Structure
Kevin Powell
5 HTML & CSS for Beginners Part 4: Bold and Italic text and HTML comments
HTML & CSS for Beginners Part 4: Bold and Italic text and HTML comments
Kevin Powell
6 HTML & CSS for Beginners Part 5: Links
HTML & CSS for Beginners Part 5: Links
Kevin Powell
7 HTML & CSS for Beginners Part 3: Paragraphs and Headings
HTML & CSS for Beginners Part 3: Paragraphs and Headings
Kevin Powell
8 HTML and CSS for Beginners Part 1: Introduction to HTML
HTML and CSS for Beginners Part 1: Introduction to HTML
Kevin Powell
9 HTML and CSS for Beginners Part 2: Building your first web page!
HTML and CSS for Beginners Part 2: Building your first web page!
Kevin Powell
10 HTML & CSS for Beginner Part 8: Introduction to CSS
HTML & CSS for Beginner Part 8: Introduction to CSS
Kevin Powell
11 HTML & CSS for Beginners Part 9: External CSS
HTML & CSS for Beginners Part 9: External CSS
Kevin Powell
12 HTML & CSS for Beginners Part 10: Divs & Spans
HTML & CSS for Beginners Part 10: Divs & Spans
Kevin Powell
13 HTML & CSS for Beginners Part 11: Classes & IDs
HTML & CSS for Beginners Part 11: Classes & IDs
Kevin Powell
14 HTML & CSS for Beginners Part 12: The CSS Box Model - Margin, Borders & Padding explained
HTML & CSS for Beginners Part 12: The CSS Box Model - Margin, Borders & Padding explained
Kevin Powell
15 HTML & CSS for Beginners Part 13: Background Images
HTML & CSS for Beginners Part 13: Background Images
Kevin Powell
16 HTML & CSS for Beginners Part 14: Style Text with CSS
HTML & CSS for Beginners Part 14: Style Text with CSS
Kevin Powell
17 HTML & CSS for Beginners Part 15: How to style links
HTML & CSS for Beginners Part 15: How to style links
Kevin Powell
18 HTML & CSS for Beginners Part 16: CSS selectors and Specificity
HTML & CSS for Beginners Part 16: CSS selectors and Specificity
Kevin Powell
19 HTML & CSS for Beginners Part 17: How to Create and Style HTML Lists
HTML & CSS for Beginners Part 17: How to Create and Style HTML Lists
Kevin Powell
20 HTML & CSS for Beginners Part 18: How Floats and Clears work
HTML & CSS for Beginners Part 18: How Floats and Clears work
Kevin Powell
21 HTML & CSS for Beginners Part 19: Colors with CSS - hex, rgba, and hsla
HTML & CSS for Beginners Part 19: Colors with CSS - hex, rgba, and hsla
Kevin Powell
22 HTML & CSS for Beginners Part 20: How to center a div
HTML & CSS for Beginners Part 20: How to center a div
Kevin Powell
23 HTML & CSS for Beginners Part 21: How to create a basic website layout - the HTML
HTML & CSS for Beginners Part 21: How to create a basic website layout - the HTML
Kevin Powell
24 HTML & CSS for Beginners Part 22: How to create a basic layout - the CSS
HTML & CSS for Beginners Part 22: How to create a basic layout - the CSS
Kevin Powell
25 How to Create a Responsive Website from Scratch - Part 1: The HTML #Responsive #HTML5
How to Create a Responsive Website from Scratch - Part 1: The HTML #Responsive #HTML5
Kevin Powell
26 How to Create a Responsive Website from Scratch - Part 2: The Header and Hero area #Responsive #CSS3
How to Create a Responsive Website from Scratch - Part 2: The Header and Hero area #Responsive #CSS3
Kevin Powell
27 How to Create a Responsive Website from Scratch - Part 3: The About Section #Responsive #CSS
How to Create a Responsive Website from Scratch - Part 3: The About Section #Responsive #CSS
Kevin Powell
28 How to Create a Responsive Website from Scratch - Part 4: Building a Responsive Portfolio Section
How to Create a Responsive Website from Scratch - Part 4: Building a Responsive Portfolio Section
Kevin Powell
29 How to Create a Responsive Website from Scratch - Part 5: Call To Action and Footer #CSS #Responsive
How to Create a Responsive Website from Scratch - Part 5: Call To Action and Footer #CSS #Responsive
Kevin Powell
30 Tutorial: Learn how to use CSS Media Queries in less than 5 minutes
Tutorial: Learn how to use CSS Media Queries in less than 5 minutes
Kevin Powell
31 End of the year upate and what's coming to my channel to start the new year
End of the year upate and what's coming to my channel to start the new year
Kevin Powell
32 Create a CSS only Mega Dropdown Menu
Create a CSS only Mega Dropdown Menu
Kevin Powell
33 CSS Tutorial: Outline and Outline Offset
CSS Tutorial: Outline and Outline Offset
Kevin Powell
34 CSS Blending Modes
CSS Blending Modes
Kevin Powell
35 Parallax effect | 2 different ways to add it with jQuery
Parallax effect | 2 different ways to add it with jQuery
Kevin Powell
36 CSS Units: vh, vw, vmin, vmax #css #responsive #design
CSS Units: vh, vw, vmin, vmax #css #responsive #design
Kevin Powell
37 How to Create a Website - Complete workflow | Part 01: Intro + Setting things up
How to Create a Website - Complete workflow | Part 01: Intro + Setting things up
Kevin Powell
38 100 Subscribers speed coding bonus video
100 Subscribers speed coding bonus video
Kevin Powell
39 How to Create a Website - Complete workflow | Part 02: The Markup #HTML
How to Create a Website - Complete workflow | Part 02: The Markup #HTML
Kevin Powell
40 How to Create a Website - Complete workflow | Part 03: Sass Variables and a Mixin #Sass
How to Create a Website - Complete workflow | Part 03: Sass Variables and a Mixin #Sass
Kevin Powell
41 How to Create a Website - Complete workflow | Part 04: Setting up the hero and header
How to Create a Website - Complete workflow | Part 04: Setting up the hero and header
Kevin Powell
42 How to Create a Website - Complete workflow | Part 05: Typography & Buttons
How to Create a Website - Complete workflow | Part 05: Typography & Buttons
Kevin Powell
43 How to Create a Website - Complete workflow | Part 06.1: Building the navigation with Flexbox
How to Create a Website - Complete workflow | Part 06.1: Building the navigation with Flexbox
Kevin Powell
44 How to Create a Website - Complete workflow | Part 06.2: Making the nav work with jQuery
How to Create a Website - Complete workflow | Part 06.2: Making the nav work with jQuery
Kevin Powell
45 Redesigning & Coding My Website #CreateICG
Redesigning & Coding My Website #CreateICG
Kevin Powell
46 How to Create a Website - Complete workflow | Part 07: Starting the flexbox grid
How to Create a Website - Complete workflow | Part 07: Starting the flexbox grid
Kevin Powell
47 How to Create a Website - Complete workflow | Part 08: Promo & Problem shooting!
How to Create a Website - Complete workflow | Part 08: Promo & Problem shooting!
Kevin Powell
48 How to Create a Website - Complete workflow | Part 09: The CTA and Footer
How to Create a Website - Complete workflow | Part 09: The CTA and Footer
Kevin Powell
49 How to Create a Website - Complete workflow | Part 10: Making it responsive
How to Create a Website - Complete workflow | Part 10: Making it responsive
Kevin Powell
50 How to Create a Website - Complete workflow | Part 11: Making it responsive con't
How to Create a Website - Complete workflow | Part 11: Making it responsive con't
Kevin Powell
51 How to Create a Website - Complete workflow | Part 12: Putting the site online
How to Create a Website - Complete workflow | Part 12: Putting the site online
Kevin Powell
52 Create a Custom Grid System with CSS Calc() and Sass
Create a Custom Grid System with CSS Calc() and Sass
Kevin Powell
53 CSS em and rem explained #CSS #responsive
CSS em and rem explained #CSS #responsive
Kevin Powell
54 Should you use Bootstrap?
Should you use Bootstrap?
Kevin Powell
55 How to add Smooth Scrolling to your one page website with jQuery
How to add Smooth Scrolling to your one page website with jQuery
Kevin Powell
56 Let's learn Bootstrap 4
Let's learn Bootstrap 4
Kevin Powell
57 How I approach designing a website - my thought process
How I approach designing a website - my thought process
Kevin Powell
58 Build a website with Bootstrap 4 - Part 1: The setup
Build a website with Bootstrap 4 - Part 1: The setup
Kevin Powell
59 Build a website with Bootstrap 4 - Introduction
Build a website with Bootstrap 4 - Introduction
Kevin Powell
60 Build a website with Bootstrap 4 - Part 2:  Customizing Variables
Build a website with Bootstrap 4 - Part 2: Customizing Variables
Kevin Powell

Related AI Lessons

โšก
Best AI Headshot Generators (for Teams) in 2026: I Tested 30+ Tools by Spendingย $3,000+
Learn how to generate high-quality AI headshots for teams by testing and comparing 30+ tools, and discover the best options for your needs
Dev.to AI
โšก
The Australian Government (DISR) Uses Glass.AI
The Australian Government's Department of Industry, Science and Resources uses Glass.AI, leveraging AI for data-driven decision making
Medium ยท AI
โšก
Basta "Blocco dello Scrittore": Ho creato un Hub di 50+ Tool AI gratuiti per scrivere tutto (senza registrazione)
Learn how to overcome writer's block with a hub of 50+ free AI tools for writing, and discover how to use them to boost your productivity
Dev.to AI
โšก
The complete beginnerโ€™s guide to building an AI-powered productivity system
Learn to build an AI-powered productivity system to boost your workflow efficiency
Medium ยท AI

Chapters (20)

Introduction
1:40 Order basics
3:10 Debugging order
4:18 Order linting
5:55 Invalid declarations & debugging them
7:40 Using order and invalid declarations on purpose
10:26 Feature queries @supports
12:45 Specificity intro
13:45 Specificity basics
15:18 Debugging specificity
16:40 Modern selectors impact on specificity
24:00 Cascade Layers introduction
24:38 Cascade Layers basics
27:25 Debugging layers
28:45 Declaring layers before using them
31:28 The impact of !important on layers
33:30 Combining layers with โ€œunlayeredโ€ styles
34:28 Introduction to scope
36:04 Scope basics
40:50 Using scope with style elements inside an element
Up next
How Walmart is empowering store leaders to better serve customers and associates
Google Cloud
Watch โ†’