CSS Custom Variables & Dark Mode | CSS Tutorial for Beginners

Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap

Learn about CSS custom variables and CSS Dark Mode in this CSS tutorial for beginners. CSS variables are also often referred to as CSS custom properties. We will use them to create a custom dark mode for your web page.

🚩 Subscribe ➜ https://bit.ly/3nGHmNn

🚀 This lesson is part of a CSS for Beginners tutorial series playlist:
   • CSS Tutorials for Beginners  

🔗 All Resources for this CSS Tutorial Series: https://github.com/gitdagray/css_course

📬 Course Updates ➜ https://courses.davegray.codes/

CSS Custom Variables & Dark Mode | CSS Tutorial for Beginners

(00:00) Intro
(00:05) Welcome
(00:26) Why use CSS variables?
(01:12) Starter Code
(01:22) :root pseudo-class
(02:02) Apply colors with CSS variables
(09:18) Apply font styles with CSS variables
(11:08) Nesting CSS variables
(15:34) Adding more HTML content
(17:46) Styling the main element
(19:41) Order of operations
(20:21) Styling the content with CSS variables
(23:15) Redefining CSS variables
(24:22) Create and apply a Dark Mode

⚙ 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/...
🔗 vscode-icons VS Code Extension: https://marketplace.visualstudio.com/...
🔗 Github Themes VS Code Extension: https://marketplace.visualstudio.com/...
🔗 W3C CSS Validator: https://jigsaw.w3.org/css-validator/
🔗 Specificity Calculator: https://specificity.keegan.st/
🔗 HTML Special Characters and Entities: https://unicode-table.com
🔗 CanIUse.com: https://caniuse.com/

📚 References:
🔗 MDN CSS: https://developer.mozilla.org/en-US/d...
🔗 MDN CSS Basics: https://developer.mozilla.org/en-US/d...
🔗 MDN CSS Selectors: https://developer.mozilla.org/en-US/d...
🔗 MDN - How to Apply Colors to HTML Elements with CSS: https://developer.mozilla.org/en-US/d...
🔗 MDN - CSS Values and Units: https://developer.mozilla.org/en-US/d...
🔗 MDN - The Box Model: https://developer.mozilla.org/en-US/d...
🔗 MDN - Styling Lists: https://developer.mozilla.org/en-US/d...
🔗 MDN - Display Property: https://developer.mozilla.org/en-US/d...
🔗 MDN - Floats: https://developer.mozilla.org/en-US/d...
🔗 MDN - Columns: https://developer.mozilla.org/en-US/d...
🔗 MDN - Margin Collapsing: https://developer.mozilla.org/en-US/d...
🔗 MDN - White-Space: https://developer.mozilla.org/en-US/d...
🔗 MDN - Positioning: https://developer.mozilla.org/en-US/d...
🔗 MDN - Flexbox: https://developer.mozilla.org/en-US/d...
🔗 MDN - Basic Concepts of Grid Layout: https://developer.mozilla.org/en-US/d...
🔗 MDN - Grid Template Areas: https://developer.mozilla.org/en-US/d...
🔗 MDN - CSS Images: https://developer.mozilla.org/en-US/d...
🔗 MDN - CSS Background Images: https://developer.mozilla.org/en-US/d...
🔗 Chip Cullen - Article on Content Layout Shift: https://chipcullen.com/what-width-and...
🔗 MDN - CSS Media Queries: https://developer.mozilla.org/en-US/d...
🔗 MDN - CSS Pseudo-Classes and Pseudo-Elements: https://developer.mozilla.org/en-US/d...
🔗 MDN - List of CSS Pseudo-Classes: https://developer.mozilla.org/en-US/d...
🔗 MDN - List of CSS Pseudo-Elements: https://developer.mozilla.org/en-US/d...
🔗 MDN - CSS Custom Properties (Variables): https://developer.mozilla.org/en-US/d...

✅ Follow Me:
Github: https://github.com/gitdagray
Twitter:   / yesdavidgray  
LinkedIn:   / davidagray  
Blog: https://yesdavidgray.com
Reddit:   / daveoneleven  

Was this tutorial about CSS Custom Variables helpful? If so, please share. Let me know your thoughts in the comments.

#css #custom #variables