{"id":21696322,"url":"https://github.com/dinanathsj29/css-variables-practical-guide-tutorial","last_synced_at":"2025-03-20T14:47:36.246Z","repository":{"id":121990030,"uuid":"234351457","full_name":"dinanathsj29/css-variables-practical-guide-tutorial","owner":"dinanathsj29","description":"Lets learn to use CSS variables a CSS custom properties to create style sheets less repetitive, easier to maintain, better readability and more flexible.","archived":false,"fork":false,"pushed_at":"2020-01-20T13:24:38.000Z","size":6851,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-25T14:11:24.496Z","etag":null,"topics":["css-custom-properties","css-var-function","css-variable-value","css-variables","global-scoped-variables","local-scope-variable","var-function","variable","variables-and-their-usages","variables-css"],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dinanathsj29.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-01-16T15:33:39.000Z","updated_at":"2024-08-11T20:41:59.000Z","dependencies_parsed_at":null,"dependency_job_id":"b7a338d2-22c8-43de-b5b5-086668e5fe8b","html_url":"https://github.com/dinanathsj29/css-variables-practical-guide-tutorial","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinanathsj29%2Fcss-variables-practical-guide-tutorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinanathsj29%2Fcss-variables-practical-guide-tutorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinanathsj29%2Fcss-variables-practical-guide-tutorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinanathsj29%2Fcss-variables-practical-guide-tutorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dinanathsj29","download_url":"https://codeload.github.com/dinanathsj29/css-variables-practical-guide-tutorial/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244635919,"owners_count":20485440,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css-custom-properties","css-var-function","css-variable-value","css-variables","global-scoped-variables","local-scope-variable","var-function","variable","variables-and-their-usages","variables-css"],"created_at":"2024-11-25T19:19:28.812Z","updated_at":"2025-03-20T14:47:36.213Z","avatar_url":"https://github.com/dinanathsj29.png","language":"HTML","readme":"\u003cp align=\"center\"\u003e\n \u003cimg src=\"_images-css-variables/1-css3-logo-1.png\" alt=\"CSS Variables\" title=\"CSS Variables\" width=\"200\" /\u003e\n\u003c/p\u003e\n\nCSS Variables = CSS custom properties\n=====================\n\n`Variables` are one of the most fundamental concepts in any programming language. A `variable is container/holder to store/hold the data/information` for future programming use or calculation purpose.\n\n`Custom properties sometimes also referred to as CSS variables or Cascading variables` are nothing but entities that contain specific values to be reused/accessed throughout a document and saves lots of time while editing large/huge websites.\n\nCSS variables set/defined/declared using custom property notation (e.g., `--base-color: black;`) and are accessed/called using the `var() function` (e.g., `background-color: var(--base-color);`).\n\nWelcome\n---------------------\n\nHi All, I'm **`Dinanath Jayaswal, Senior UI/Web Developer and Adobe Certified Expert Professional`**, I wanna welcome you to CSS Variables-CSS custom properties practical Guide/Tutorial for beginners. \n\nAbout the Course/Tutorial\n---------------------\n\nThis is a comprehensive guide to use the CSS Variables-CSS custom properties. This complete guide explains everything you want to know/learn about the CSS Variables-CSS custom properties.\n\nWho is this for? \n---------------------\n\nThis Course/Tutorial is ideal for:\n- Any Web designer/developer interested in getting a deep understanding of CSS Advanced-latest features like CSS Variables-CSS custom properties\n- CSS lovers want to acquire knowledge of next/latest CSS level (properties/features)\n- Candidates desire to become CSS Expert and better Front End web Developer / Designer\n- Web designers/developers who want to improve skills with new web standards\n- Anyone who knows CSS and wants to dive deeper with upcoming features\n- Anyone wants to sharpen their CSS skills\n\nCourse/Tutorial achievement\n---------------------\nCourse/Tutorial Goal\n---------------------\n\nAfter completing/attending/finishing this Course/Tutorial, participants should be able to: \n- Create your style sheets those are less repetitive and easier to maintain\n- Write CSS with less repetition, better readability, and more flexibility\n- Use and follow the power of advanced CSS Variables features in huge websites/applications\n- Declare and use the CSS variables in the Global and Local Scope\n- Understand the difference between CSS variables and Preprocessors (like SASS, LESS) variables\n\nPrerequisites for current course / What you need to know\n---------------------\n\n- Basic/Intermediate knowledge of HTML5 and CSS3\n- Basics of JavaScript will be an added advantage\n\nTopics included/covered\n=====================\n\n1. [Introduction to CSS Variables/Custom Properties](#1-introduction-to-css-variables-custom-properties)\n    - 1.1. [What are Variables](#11-what-are-variables)\n    - 1.2. [What are CSS Variables](#12-what-are-css-variables)\n    - 1.3. [Why CSS Variables](#13-why-css-variables) | \n    [CSS Variable Benefits](#13-css-variable-benefits)\n    - 1.4. [Browser support](#14-browser-support)\n    - 1.5. [Declaring CSS Variables](#15-declaring-css-variables) | \n    [Using CSS Variables](#15-using-css-variables)\n    - 1.6. [CSS Variables vs Preprocessor Variables](#16-css-variables-vs-preprocessor-variables) | [Difference Between CSS Variables and Preprocessor Variables](#16-difference-between-css-variables-and-preprocessor-variables)\n    - 1.7. [CSS Variables with JavaScript](#17-css-variables-with-javascript)\n    - 1.8. [CSS Variables var() function](#18-css-variables-var-function)\n    \n2. [CSS Variables Practical Demo Examples](#2-css-variables-practical-demo-examples)\n    - 2.1. [Managing Colors-Theme](#21-managing-colors-theme) \n    - 2.2. [Hover with Fallback support](#22-hover-with-fallback-support) \n    - 2.3. [Hover with Transform Transition Amimation](#23-hover-with-Transform-transition-amimation) \n    - 2.4. [CSS variables Cascading](#24-css-variables-cascading) \n    - 2.5. [JavaScript Theme Switcher](#25-javascript-theme-switcher) | [JavaScript Theme Color Swatch Switcher](#25-javascript-theme-color-swatch-switcher) \n    - 2.6. [Media Query Responsive Layout](#26-media-query-responsive-layout)\n    - 2.7. [CSS Variables Gradients](#27-css-variables-gradients)\n\n3. [CSS Variables Resources](#3-css-variables-resources)\n\n1 Introduction to CSS Variables Custom Properties\n=====================\n\n- CSS is static stylesheet language/mostly a declarative language, lacking in dynamic capabilities/Programming features-terminologies like variables, mixin, function, re-usable classes, etc.\n- To overcome all CSS disadvantages and add advanced programming features-terminologies, earlier/in past we have used CSS pre-processors like `SASS` or `LESS`, but now a days it's possible to use those features in pure/native CSS with CSS3 advanced features i.e. Custom Properties\n\n1.1. What are Variables\n---------------------\n\n- `Variables` are one of the most fundamental and important concepts in any programming language\n- A variable is `container/holder to store/hold the data/information`\n- A variable is a kind of data holder where we can store some value for future further programming use or calculation purpose\n- A JavaScript variable is simply a `name of the storage location (named containers/named storage)` for data\n- Variables are `symbolic names for values` \n- Variables are used to store data of different types like a `string` of text, `numbers`, `boolean` values like true/false, an `array` or `object` of data, etc. \n- The data or value stored in the variables can be `set`, `updated`, and `retrieved` whenever needed\n- Variables let you store and update different values your program needs in order to perform some work\n- Variables are declared using the keyword `var` keyword\n- The `assignment operator (=)` is used to assign value to a variable, like this: `var varName = value;` or `var firstName = 'JavaScript';`\n- **Example**: Variables are like `box or an envelope` which we use to `organize various kinds of stuff` and put a `label` on each box or an envelope\n- **Example**: Variable declaration and assignment is just `like Maths \u0026 Algebra`: `x = 10`; and in JavaScript we write `var x = 10;`\n\u003e **Note**: Depending on programming language, the different assignment operator like `equal to =` or `colon :` is used to assign value to a variable\n\n- For learning/understanding purpose/instance, lets consider the following JavaScript snippet:\n```js\n// javascript variables - variables defined to hold different types of data\nvar techName = 'JavaScript'; // String literal \nvar version = 6; // Number literal\nvar isDone = true; // Boolean literal\n\nconsole.log('Learning '+techName+version);\n\nvar firstName = 'Dinanath ';\nlet lastName = 'Jayaswal'\nconst fullName = firstName + lastName\n```\n\n\u003e **Syntax \u0026 Example**: `1.1-javascript-variable.html`\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\n  \u003chead\u003e\n\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"\u003e\n    \u003ctitle\u003e1.1-javascript-variable.html\u003c/title\u003e\n\n    \u003c!-- internal style --\u003e\n    \u003cstyle\u003e\n      /* css selector: { property:value; } */\n      body {\n        font-family: arial;\n      }\n    \u003c/style\u003e\n\n  \u003c/head\u003e\n\n  \u003cbody\u003e\n    \n    \u003c!-- include external JavaScript - body section --\u003e\n    \u003cscript src=\"./1.1-script.js\"\u003e\u003c/script\u003e\n    \n  \u003c/body\u003e\n\n\u003c/html\u003e\n```\n\n\u003e **Syntax \u0026 Example**: `1.1-script.js`\n\n```js\n// external js file\n// Write all JavaScript code here\n\n// variables defined to hold different types of data\nvar techName = 'JavaScript'; // String literal \nvar version = 6; // Number literal\nvar isDone = true; // Boolean literal\n\nconsole.log('Learning '+techName+version);\n\n// ------------------------------\n\n// Declaring Variable\nvar userName;\n\n// Assigning value\nuserName = 'Dinanath';\n\nconsole.log('Welcome '+userName);\n\n// ------------------------------\n\n// Declaring multiple variables\nvar firstName = 'Dinanath', lastName = 'Jayaswal', age = 35, isMarried = 'true';\n\n// Declaring multiple variables in multiple lines for readability\n/* var firstName = 'Dinanath', \nlastName = 'Jayaswal', \nage = 35, \nisMarried = 'true'; */\n\nconsole.log('I am ' + firstName + ' ' + lastName);\n```\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"_images-css-variables/1.1-javascript-variable.png\" alt=\"JavaScript variables declaration and use\" title=\"JavaScript variables declaration and use\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image 1.1 - JavaScript variables declaration and use \u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n1.2. What are CSS Variables\n---------------------\n\n- CSS Variables look like a simple regular CSS properties with an extra `dashes --` before them: `--variable-name: value;` e.g., `--base-font: Arial;`\n- CSS variables set/defined/declared using custom property notation (e.g., `--base-color: black;`) and are accessed/called using the `var() function` (e.g., `background-color: var(--base-color);`).\n- CSS Variables are also known as \"Custom Properties\", simply we can say `CSS Variables == Custom Properties`\n- `Custom properties sometimes also referred to as CSS variables or Cascading variables` are nothing but entities that contain specific values to be reused/accessed throughout a document and saves lots of time while editing CSS properties and values in large/huge websites\n- `CSS variables` are very handy and useful when we are working with huge/large websites with repetitive properties and styles (many properties like color,font-size, margins, etc)\n- By using `CSS variables` In case of any `global change needed` through-out the application, instead of changing every occurrence/instance its advisable to change the `single variable` so it will reflect globally\n- Custom properties do follow CSS mechanisms/principles and so they cascade, inherit their value from their parent. \n- CSS variables can be defined with or as Global or Local scope\n\n\u003e **Syntax \u0026 Example**: `1.2.1-old-css-way-repetition.html`\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\n  \u003chead\u003e\n\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"\u003e\n    \u003ctitle\u003e1.2.1-old-css-way-repetition.html\u003c/title\u003e\n\n    \u003clink rel=\"stylesheet\" href=\"./1.2.1-style-old-way-repetition.css\"\u003e\n  \n  \u003c/head\u003e\n\n  \u003cbody\u003e\n    \n    \u003cdiv class=\"container\"\u003e\n\n      \u003cdiv class=\"sub-container\"\u003e\n\n        \u003ch1 class=\"heading-text\" id=\"mainHeadingText\"\u003e1.2 What are CSS Variables\u003c/h1\u003e\n\n        \u003cp class=\"para-text\" id=\"mainParaText\"\u003e`Variables` are one of the most fundamental and important concepts in any programming language\u003c/p\u003e\n\n        \u003ch2 class=\"subheading-text\" id=\"subHeadingText\"\u003e1.2 - 1.2.1 old css way repetition\u003c/h2\u003e\n\n      \u003c/div\u003e\n\n    \u003c/div\u003e\n  \n  \u003c/body\u003e\n\n\u003c/html\u003e\n```\n\n\u003e **Syntax \u0026 Example**: `1.2.1-style-old-way-repetition.css`\n\n```css\nbody {\n  font-family: arial;\n}\n\n.heading-text {\n  background-color: #f66969;\n  color: #ffffff\n  padding: 10px;\n}\n\n/* same property used above with .heading-text are repeated */\n.subheading-text {\n  background-color: #f66969;\n  color: #ffffff\n  padding: 10px;\n}\n```\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"_images-css-variables/1.2.1-old-css-way-repetition.png\" alt=\"The old CSS way of repeating value\" title=\"The old CSS way of repeating value\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image 1.2.1 - The old CSS way of repeating value \u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"_images-css-variables/1.2.1.1-old-css-way-repetition.png\" alt=\"The old CSS way of repeating value\" title=\"The old CSS way of repeating value\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image 1.2.1.1 - The old CSS way of repeating value \u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n\u003chr/\u003e\n\n\u003e **Syntax \u0026 Example**: `1.2.2-new-css-way-variables.html`\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\n  \u003chead\u003e\n\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"\u003e\n    \u003ctitle\u003e1.2.2-new-css-way-variables.html\u003c/title\u003e\n\n    \u003clink rel=\"stylesheet\" href=\"./1.2.2-style-new-css-way-variables.css\"\u003e\n  \n  \u003c/head\u003e\n\n  \u003cbody\u003e\n    \n    \u003cdiv class=\"container\"\u003e\n\n      \u003cdiv class=\"sub-container\"\u003e\n\n        \u003ch1 class=\"heading-text\" id=\"mainHeadingText\"\u003e1.2 What are CSS Variables\u003c/h1\u003e\n\n        \u003cp class=\"para-text\" id=\"mainParaText\"\u003e`Variables` are one of the most fundamental and important concepts in any programming language\u003c/p\u003e\n\n        \u003ch2 class=\"subheading-text\" id=\"subHeadingText\"\u003e1.2 - 1.2.2 new css way variables\u003c/h2\u003e\n\n      \u003c/div\u003e\n\n    \u003c/div\u003e\n  \n  \u003c/body\u003e\n\n\u003c/html\u003e\n```\n\n\u003e **Syntax \u0026 Example**: `1.2.2-style-new-css-way-variables.css`\n\n```css\n/* CSS selectors must set/defined/declared inside any root selector like `:root` or `body`, so that these variables exists globally/entire document to use */\n:root {\n  --font-face: Arial;\n  --base-bg-color: #f66969;\n  --base-text-color: #ffffff;\n  --base-padding: 10px;\n}\n\nbody {\n  font-family: var( --font-face);\n}\n\n.heading-text {\n  /* background-color: #f66969;\n  color: #ffffff;\n  padding: 10px; */\n\n  /* access/call/use variables with var() function*/\n  background-color: var(--base-bg-color);\n  color: var(--base-text-color);\n  padding: var(--base-padding);\n}\n\n.subheading-text {\n  /* background-color: #f66969;\n  color: #ffffff;\n  padding: 10px; */\n\n  background-color: var(--base-bg-color);\n  color: var(--base-text-color);\n  padding: var(--base-padding);\n}\n```\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"_images-css-variables/1.2.2-new-css-way-variables.png\" alt=\"The new CSS way of using variables - DRY - Do Not Repeat Yourself principle\" title=\"The new CSS way of using variables - DRY - Do Not Repeat Yourself principle\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image 1.2.2 - The new CSS way of using variables - DRY - Do Not Repeat Yourself principle \u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"_images-css-variables/1.2.2.1-new-css-way-variables.png\" alt=\"The new CSS way of using variables - DRY - Do Not Repeat Yourself principle\" title=\"The new CSS way of using variables - DRY - Do Not Repeat Yourself principle\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image 1.2.2 - The new CSS way of using variables - DRY - Do Not Repeat Yourself principle \u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n1.3. Why CSS Variables\n---------------------\n1.3. CSS Variable Benefits\n---------------------\n\n- The benefits of using variables in CSS are not that much different than from those of using variables in any other programming languages (define/initiate once and use when required)\n- The beauty of variables is that they let you store your valuables/properties in one place and update it on the fly for several various purposes\n- As your web apps grow bigger, the CSS becomes big, redundant and many times messy. Used within a good context, the CSS variables, give you the mechanism to reuse and easily change repeatedly occurring CSS properties\n- Its helpful in following `DRY - Do Not Repeat Yourself` principle, One of the most compelling thing is that it reduces repetition in your stylesheet\n- Create your style sheets those are less repetitive and easier to maintain\nbetter readability, and more flexibility\n- One can easily access and overwrite CSS variables inside Media Query\n- Anytime we can create and use scoped variables used only for a particular element like the following variable is used only for a top navigation bar: `.nav-top { --base-link-color: #ed143d; }`\n\n1.4. Browser support\n---------------------\n\nThe CSS Variable - custom properties are supported well in all modern browsers, except Internet Explorer\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"_images-css-variables/1.4-css-variables-browser-support.png\" alt=\"CSS Variables browser support\" title=\"CSS Variables browser support\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image 1.4 - CSS Variables browser support \u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n1.5. Declaring CSS Variables\n---------------------\n1.5. Using CSS Variables\n---------------------\n\n- CSS Variables look like a simple regular CSS properties with an extra `dashes --` before them: `--variable-name: value;` ie. `--base-font: Arial;`\n- CSS variables set/defined/declared using custom property notation (e.g., `--base-color: black;`) and are accessed/called using the `var() function` (e.g., `background-color: var(--base-color);`).\n\u003e **Note**: CSS selectors must set/defined/declared inside any root selector like `:root` or `body`, so that these variables exists globally/entire document to use\n\n\u003e **Syntax**: `Define and use css variables`\n```css\n/* define variables */\n:root {\n  --base-theme-color: #4caf50; /* green shade */\n  --base-link-color: #cddc39; /* yellow lemon shade */\n}\n\n/* call/use variables */\nbody {\n  background-color: var(--base-theme-color);\n}\n\na:link {\n  color: var(--base-link-color);\n}\n```\n\n1.5.1.1. Declaring a global / globally scoped CSS Variables - Create a Green Theme\n---------------------\n\n\u003e **Syntax \u0026 Example**: `1.5.1.1-define-variables-global-green-theme.html`\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\n  \u003chead\u003e\n\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"\u003e\n    \u003ctitle\u003e1.5.1.1-define-variables-global-green-theme.html\u003c/title\u003e\n\n    \u003clink rel=\"stylesheet\" href=\"1.5.1.1-style-define-variables-global-green-theme.css\"\u003e\n  \n  \u003c/head\u003e\n\n  \u003cbody\u003e\n    \n    \u003cdiv class=\"container\"\u003e\n\n      \u003cdiv class=\"sub-container\"\u003e\n\n        \u003ch1 class=\"top-heading-text\" id=\"topHeadingText\"\u003eCreate a Green Theme with CSS variables\u003c/h1\u003e\n\n        \u003ch1 class=\"heading-text\" id=\"mainHeadingText\"\u003e1.5 Declaring CSS Variables/Using CSS Variables\u003c/h1\u003e\n\n        \u003cp class=\"para-text\" id=\"mainParaText\"\u003e`Variables` are one of the most fundamental and important concepts in any programming language\u003c/p\u003e\n\n        \u003ch2 class=\"subheading-text\" id=\"subHeadingText\"\u003e1.5 - 1.5.1. Declaring a global / globally scoped CSS Variables\u003c/h2\u003e\n\n        \u003cul\u003e\n          \u003cli\u003eList Item 1 - Define variables in any of root elements \u003c/li\u003e\n          \u003cli\u003eList Item 2 - Call variables for required ids/classes/elements\u003c/li\u003e\n          \u003cli\u003eList Item 3 - Verify variables properties reflect properly\u003c/li\u003e\n        \u003c/ul\u003e\n      \n      \u003c/div\u003e\n\n    \u003c/div\u003e\n  \n  \u003c/body\u003e\n\n\u003c/html\u003e\n```\n\n\u003e **Syntax \u0026 Example**: `1.5.1.1-style-define-variables-global-green-theme.css`\n\n```css\n/* CSS selectors must set/defined/declared inside any root selector like `:root` or `body`, so that these variables exists globally/entire document to use */\n:root {\n  /* global scoped variables */\n  --font-face: Arial;\n  --base-bg-color: #66f969;\n  --base-text-color: #327b34;\n  --base-padding: 30px 10px;\n\n  /* list item related variables */\n  --list-item-margin: 10px;\n  --list-item-padding: 20px 10px;\n  --list-item-corner-radius: 5px;\n}\n\nbody {\n  font-family: var(--font-face);\n}\n\n.top-heading-text {\n  color: var(--base-text-color);\n}\n\n.heading-text {\n  /* access/call/use/apply/refer variables with var() function*/\n  background-color: var(--base-bg-color);\n  color: var(--base-text-color);\n  padding: var(--base-padding);\n}\n\n.subheading-text {\n  background-color: var(--base-bg-color);\n  color: var(--base-text-color);\n  padding: var(--base-padding);\n}\n\nul \u003e li {\n  color: var(--base-text-color);\n  padding: var(--list-item-padding);\n  border: 3px solid var(--base-bg-color);\n  border-radius: var(--list-item-corner-radius);\n  margin: var(--list-item-margin);\n}\n```\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"_images-css-variables/1.5.1.1-define-variables-global-green-theme.png\" alt=\"Declaring \u0026 Using CSS Variables - Create a Green Theme\" title=\"Declaring \u0026 Using CSS Variables - Create a Green Theme\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image 1.5.1.1 - Declaring \u0026 Using CSS Variables - Create a Green Theme \u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n\u003chr/\u003e\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"_images-css-variables/1.5.1.1-style-define-variables-global-green-theme.png\" alt=\"Declaring \u0026 Using CSS Variables - Styles Create a Green Theme\" title=\"Declaring \u0026 Using CSS Variables - Styles Create a Green Theme\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image 1.5.1.1 - Declaring \u0026 Using CSS Variables - Styles Create a Green Theme \u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n1.5.1.2. Declaring a global / globally scoped CSS Variables - Convert above Green Theme to Blue Theme\n---------------------\n\nIt is pretty easy to change the variable values once at a central place and it simply modifies the themes or base properties look/feel/appearance\n\n- To convert above metioned Green Theme into Blue Theme, just change: `--base-bg-color: #6696f9; --base-text-color: #37327b` and you are done.\n\n\u003e **Syntax \u0026 Example**: `1.5.1.2-define-convert-variables-global-blue-theme.html`\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\n  \u003chead\u003e\n\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"\u003e\n    \u003ctitle\u003e1.5.1.2-define-convert-variables-global-blue-theme.html\u003c/title\u003e\n\n    \u003clink rel=\"stylesheet\" href=\"./1.5.1.2-style-define-convert-variables-global-blue-theme.css\"\u003e\n  \n  \u003c/head\u003e\n\n  \u003cbody\u003e\n    \n    \u003cdiv class=\"container\"\u003e\n\n      \u003cdiv class=\"sub-container\"\u003e\n\n        \u003ch1 class=\"top-heading-text\" id=\"topHeadingText\"\u003eCreate a Green Theme with CSS variables\u003c/h1\u003e\n\n        \u003ch1 class=\"heading-text\" id=\"mainHeadingText\"\u003e1.5 Declaring CSS Variables/Using CSS Variables\u003c/h1\u003e\n\n        \u003cp class=\"para-text\" id=\"mainParaText\"\u003e`Variables` are one of the most fundamental and important concepts in any programming language\u003c/p\u003e\n\n        \u003ch2 class=\"subheading-text\" id=\"subHeadingText\"\u003e1.5 - 1.5.1. Declaring a global / globally scoped CSS Variables\u003c/h2\u003e\n\n        \u003cul\u003e\n          \u003cli\u003eList Item 1 - Define variables in any of root elements \u003c/li\u003e\n          \u003cli\u003eList Item 2 - Call variables for required ids/classes/elements\u003c/li\u003e\n          \u003cli\u003eList Item 3 - Verify variables properties reflect properly\u003c/li\u003e\n        \u003c/ul\u003e\n      \n      \u003c/div\u003e\n\n    \u003c/div\u003e\n  \n  \u003c/body\u003e\n\n\u003c/html\u003e\n```\n\n\u003e **Syntax \u0026 Example**: `1.5.1.2-style-define-convert-variables-global-blue-theme.css`\n\n```css\n/* CSS selectors must set/defined/declared inside any root selector like `:root` or `body`, so that these variables exists globally/entire document to use */\n:root {\n  /* global scoped variables */\n  --font-face: Arial;\n  --base-bg-color: #6696f9;\n  --base-text-color: #37327b;\n  --base-padding: 30px 10px;\n\n  /* list item related variables */\n  --list-item-margin: 10px;\n  --list-item-padding: 20px 10px;\n  --list-item-corner-radius: 5px;\n}\n\nbody {\n  font-family: var(--font-face);\n}\n\n.top-heading-text {\n  color: var(--base-text-color);\n}\n\n.heading-text {\n  /* access/call/use/apply/refer variables with var() function*/\n  background-color: var(--base-bg-color);\n  color: var(--base-text-color);\n  padding: var(--base-padding);\n}\n\n.subheading-text {\n  background-color: var(--base-bg-color);\n  color: var(--base-text-color);\n  padding: var(--base-padding);\n}\n\nul \u003e li {\n  color: var(--base-text-color);\n  padding: var(--list-item-padding);\n  border: 3px solid var(--base-bg-color);\n  border-radius: var(--list-item-corner-radius);\n  margin: var(--list-item-margin);\n}\n```\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"_images-css-variables/1.5.1.2-define-convert-variables-global-blue-theme.png\" alt=\"Declaring \u0026 Using CSS Variables - Convert to Blue Theme\" title=\"Declaring \u0026 Using CSS Variables - Convert to Blue Theme\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image 1.5.1.2 - Declaring \u0026 Using CSS Variables - Convert to Blue Theme \u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n\u003chr/\u003e\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"_images-css-variables/1.5.1.2-style-define-convert-variables-global-blue-theme.png\" alt=\"Declaring \u0026 Using CSS Variables - Styles Convert to Blue Theme\" title=\"Declaring \u0026 Using CSS Variables - Styles Convert to Blue Theme\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image 1.5.1.2 - Declaring \u0026 Using CSS Variables - Styles Convert to Blue Theme \u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n1.5.2. Declaring a local / locally scoped CSS Variables\n---------------------\n\n- We can also declare/create local variables, which are `accessible only to the declared element and it’s children`\n- Local scoped CSS Variables are useful and make sense when we want to apply some properties and values only to a specific part(s) of app\n\n\u003e **Syntax \u0026 Example**: `1.5.2.1-define-variables-local.html`\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\n  \u003chead\u003e\n\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"\u003e\n    \u003ctitle\u003e1.5.2.1-define-variables-local.html\u003c/title\u003e\n\n    \u003clink rel=\"stylesheet\" href=\"1.5.2.1-style-define-variables-local.css\"\u003e\n  \n  \u003c/head\u003e\n\n  \u003cbody\u003e\n    \n    \u003cdiv class=\"container\"\u003e\n\n      \u003cdiv class=\"sub-container\"\u003e\n\n        \u003ch1 class=\"heading-text\" id=\"mainHeadingText\"\u003e1.5 Declaring CSS Variables/Using CSS Variables\u003c/h1\u003e\n\n        \u003cp class=\"para-text\" id=\"mainParaText\"\u003e`Variables` are one of the most fundamental and important concepts in any programming language\u003c/p\u003e\n\n        \u003ch2 class=\"subheading-text\" id=\"subHeadingText\"\u003e1.5 - 1.5.1. Declaring a global / globally scoped CSS Variables\u003c/h2\u003e\n\n        \u003cul\u003e\n          \u003cli\u003eList Item 1 - Define variables in any of root elements \u003c/li\u003e\n          \u003cli\u003eList Item 2 - Call variables for required ids/classes/elements\u003c/li\u003e\n          \u003cli\u003eList Item 3 - Verify variables properties reflect properly\u003c/li\u003e\n        \u003c/ul\u003e\n      \n      \u003c/div\u003e\n\n    \u003c/div\u003e\n  \n  \u003c/body\u003e\n\n\u003c/html\u003e\n```\n\n\u003e **Syntax \u0026 Example**: `1.5.2.1-style-define-variables-local.css`\n\n```css\n:root {\n  /* global scoped variables */\n  --font-face: Arial;\n  --base-bg-color: #f66969;\n  --base-text-color: #ffffff;\n  --base-padding: 30px 10px;\n\n  --list-item-margin: 10px;\n  --list-item-padding: 20px 10px;\n  --list-item-corner-radius: 5px;\n}\n\nbody {\n  font-family: var(--font-face);\n}\n\n.heading-text {\n  background-color: var(--base-bg-color);\n  color: var(--base-text-color);\n  padding: var(--base-padding);\n}\n\n.subheading-text {\n  /* local scoped variables */\n  --base-bg-color: #66f969;\n  --base-text-color: #327b34;\n\n  background-color: var(--base-bg-color);\n  color: var(--base-text-color);\n  padding: var(--base-padding);\n}\n\nul \u003e li {\n  /* local scoped variables */\n  --base-bg-color: #6696f9;\n  --base-text-color: #37327b;\n\n  background-color: var(--base-bg-color);\n  color: var(--base-text-color);\n  padding: var(--list-item-padding);\n\n  border: 3px solid var(--base-bg-color);\n  border-radius: var(--list-item-corner-radius);\n  margin: var(--list-item-margin);\n}\n```\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"_images-css-variables/1.5.2.1-define-variables-local.png\" alt=\"Declaring \u0026 Using CSS Variables - Create local scoped variables\" title=\"Declaring \u0026 Using CSS Variables - Create local scoped variables\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image 1.5.2.1 - Declaring \u0026 Using CSS Variables - Create local scoped variables \u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n\u003chr/\u003e\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"_images-css-variables/1.5.2.1-style-define-variables-local.png\" alt=\"Declaring \u0026 Using CSS Variables - Styles Create local scoped variables\" title=\"Declaring \u0026 Using CSS Variables - Styles Create local scoped variables\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image 1.5.2.1 - Declaring \u0026 Using CSS Variables - Styles Create local scoped variables \u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n1.6. CSS Variables vs Preprocessor Variables\n---------------------\n1.6. Difference Between CSS Variables and Preprocessor Variables\n---------------------\n\nVariables are one of the major reasons why CSS preprocessors like `SASS` or `LESS` introduced and exist at all in the web world. There are many differences between CSS Variables and Preprocessor Variables, some important differences are mentioned below:\n\n| CSS Variables | Preprocessor Variables |\n| --------------------------------------------------| --------------------------------------------------|\n| Browser understand CSS, so no need for compilation as we are working with pure/native CSS | We need to convert/compile .SASS, .SCSS and .LESS source files into .CSS every time, so that the browser can understand compiled .CSS code|\n| More recently, native CSS has started supporting CSS variables, or \"CSS Custom Properties\". It allows you to work with variables directly in CSS. There are no compiling | Preprocessors introduced to use programming features like Variable, Functions, Loops into CSS styling, so Preprocessors source files must compile into .CSS | \n| CSS variables are actually a part of the DOM | The variable was part of the preprocessor language (.SASS, .SCSS and .LESS files), not CSS itself. Once the code compiles, the variables are gone |\n| CSS variables are always available and accessible while debugging with Inspect Element and one can easily change it from `Inspect -\u003e Element -\u003e Source` | The preprocessor code/variables would do nothing in a browser, The browser wouldn't understand the declarations and toss them out (.SASS, .SCSS and .LESS variables are not available in browser) |\n| We can access and manipulate native CSS variables with JavaScript | As preprocessor uses (.SASS, .SCSS and .LESS) a separate file it is not accessible with JavaScript |\n| One can easily access and overwrite CSS variables inside Media Query (as and when media or resolution changes the browser recheck/reassign/repaints the variable if needed | Sometimes it is not possible with preprocessor variables |\n\n\u003e **Note**: As Browser understands only CSS styling, the preprocessor code/variables would do nothing in a browser, The browser wouldn't understand the declarations and toss them out, that's the reason why Preprocessors files need to compile/converted into native CSS before sending/viewing into the browser\n\n1.7. CSS Variables with JavaScript\n---------------------\n\n- One more super cool thing you can do is access CSS variables directly from your JavaScript code\n- One of the important benefits of CSS Variables is that it can interact via the power of JavaScript\n- While dealing with CSS Variables JavaScript widely uses `getComputedStyle()` `getProperty()` and `style.setProperty()` methods\n\n\u003e **Syntax \u0026 Example**: `1.7.1-css-variables-javascript-interaction.html`\n\n```html\n \u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\n  \u003chead\u003e\n\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"\u003e\n    \u003ctitle\u003e1.7.1-css-variables-javascript-interaction.html\u003c/title\u003e\n\n    \u003clink rel=\"stylesheet\" href=\"1.7.1-style-variables-javascript-interaction.css\"\u003e\n  \n  \u003c/head\u003e\n\n  \u003cbody\u003e\n    \n    \u003cdiv class=\"container\"\u003e\n\n      \u003cdiv class=\"sub-container\"\u003e\n\n        \u003ch1 class=\"top-heading-text\" id=\"topHeadingText\"\u003eGet and Set CSS variables values with JavaScript\u003c/h1\u003e\n\n        \u003ch1 class=\"heading-text\" id=\"mainHeadingText\"\u003e1.5 Declaring CSS Variables/Using CSS Variables\u003c/h1\u003e\n\n        \u003cp class=\"para-text\" id=\"mainParaText\"\u003e`Variables` are one of the most fundamental and important concepts in any programming language\u003c/p\u003e\n\n        \u003ch2 class=\"subheading-text\" id=\"subHeadingText\"\u003e1.5 - 1.5.1. Declaring a global / globally scoped CSS Variables\u003c/h2\u003e\n\n        \u003cul\u003e\n          \u003cli\u003eList Item 1 - Define variables in any of root elements \u003c/li\u003e\n          \u003cli\u003eList Item 2 - Call variables for required ids/classes/elements\u003c/li\u003e\n          \u003cli\u003eList Item 3 - Verify variables properties reflect properly\u003c/li\u003e\n        \u003c/ul\u003e\n      \n      \u003c/div\u003e\n\n    \u003c/div\u003e\n    \n    \u003cscript src=\"./1.7.1-script-variables-javascript-interaction.js\"\u003e\u003c/script\u003e\n  \n  \u003c/body\u003e\n\n\u003c/html\u003e\n```\n\n\u003e **Syntax \u0026 Example**: `1.7.1-style-variables-javascript-interaction.css`\n\n```css\n :root {\n  --font-face: Arial;\n  --base-bg-color: #66f969;\n  --base-text-color: #327b34;\n  --base-padding: 30px 10px;\n\n  --list-item-margin: 10px;\n  --list-item-padding: 20px 10px;\n  --list-item-corner-radius: 5px;\n}\n\nbody {\n  font-family: var(--font-face);\n}\n\n.top-heading-text {\n  color: var(--base-text-color);\n}\n\n.heading-text {\n  background-color: var(--base-bg-color);\n  color: var(--base-text-color);\n  padding: var(--base-padding);\n}\n\n.subheading-text {\n  background-color: var(--base-bg-color);\n  color: var(--base-text-color);\n  padding: var(--base-padding);\n}\n\nul \u003e li {\n  color: var(--base-text-color);\n  padding: var(--list-item-padding);\n  border: 3px solid var(--base-bg-color);\n  border-radius: var(--list-item-corner-radius);\n  margin: var(--list-item-margin);\n}\n```\n\n\u003e **Syntax \u0026 Example**: `1.7.1-script-variables-javascript-interaction.js`\n\n```js\n console.log('in 1.7.1-script-variables-javascript-interaction.js');\n\n// get the root element\nvar root = document.querySelector(':root');\n//console.log('root', root);\n\n// get all the styles/CSSStyleDeclaration for root\nvar rootStyles = getComputedStyle(root);\nconsole.log('rootStyles', rootStyles);\n\n// get --base-bg-color variable value available inside root styles\n// var baseBgColor = rootStyles.getPropertyValue('--base-bg-color');\n// console.log('baseBgColor', baseBgColor);\n\nroot.style.setProperty('--base-bg-color', '#f66969') // red- #f66969; green - #66f969; blue- #6696f9;\n```\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"_images-css-variables/1.7.1.1-css-variables-javascript-interaction-original-green.png\" alt=\"CSS variable interaction with JavaScript Original Green output\" title=\"CSS variable interaction with JavaScript Original Green output\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image 1.7.1.1 - CSS variable interaction with JavaScript Original Green output \u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n\u003chr/\u003e\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"_images-css-variables/1.7.1.2-css-variables-javascript-interaction-set-red.png\" alt=\"CSS variable interaction with JavaScript updated Red output\" title=\"CSS variable interaction with JavaScript updated Red output\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image 1.7.1.2 - CSS variable interaction with JavaScript updated Red output \u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n1.8. CSS Variables var() function\n---------------------\n \n- Any CSS variables defined in the stylesheet can be `accessed` by using `var()` function\n- The CSS `var()` function can be used to insert the value of a custom property or a CSS variable\n- The var() function cannot be used in any property names, selectors or anything else besides property values setting or providing fallback value support\n\n\u003e **Syntax**: ``` var(\u003ccustom-name\u003e, \u003cvalue\u003e) ``` \u003cbr/\u003e\n\u003e **Syntax**: ``` var( \u003ccustom-property-name\u003e , \u003cdeclaration-value\u003e? ) ```\n\n- ```var(--main-color, #ff7f50) ```\n  - **`\u003ccustom-name\u003e`**: **Required** Parameter. It's the custom property's name (must start with two dashes)\n  - **`\u003cvalue\u003e`**: **Optional**. The fallback value. Used only if the custom property is invalid or not defined or not found in stylesheet context (fallback support)\n\n2 CSS Variables Practical Demo Examples\n=====================  \n\n2.1. Managing Colors-Theme\n---------------------\n\n\u003e **Syntax \u0026 Example**: `2.1-css-var-demo-managing-colors-themes.html`\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\n  \u003chead\u003e\n\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"\u003e\n    \u003ctitle\u003e2.1-css-var-demo-managing-colors-themes.html\u003c/title\u003e\n\n    \u003clink rel=\"stylesheet\" href=\"2.1-style-css-var-demo-managing-colors-themes.css\"\u003e\n  \n  \u003c/head\u003e\n\n  \u003cbody\u003e\n    \n    \u003cdiv class=\"container\"\u003e\n\n      \u003ch1 class=\"top-heading-text\" id=\"topHeadingText\"\u003e2. CSS Variable Demo\u003c/h1\u003e\n      \n      \u003ch2 class=\"subheading-text\" id=\"subHeadingText\"\u003e2.1 - Managing Colors Themes\u003c/h2\u003e\n\n      \u003carticle class=\"info-text\"\u003e\n        The benefits of using variables in CSS are not that much different than from those of using variables in any other programming languages (define/initiate once and use when required). \u003cbr/\u003e \u003cbr/\u003e\n        The beauty of variables is that they let you store your valuables/properties in one place and update it on the fly for several various purposes. \u003cbr/\u003e\n      \u003c/article\u003e\n\n      \u003cfooter class=\"footer-text\"\u003eThis is footer Text\u003c/footer\u003e\n\n    \u003c/div\u003e\n  \n  \u003c/body\u003e\n\n\u003c/html\u003e\n```\n\n\u003e **Syntax \u0026 Example**: `2.1-style-css-var-demo-managing-colors-themes.css`\n\n```css\n:root {\n  /* define/set variables */\n  --main-font-family: Verdana;\n  --main-theme-color: #ff7f50;\n  --main-line-height: 2;\n}\n\nbody {\n  font-family: var(--main-font-family);\n  text-align: center;\n}\n\n.top-heading-text {\n  /* refer/call variables */\n  background-color: var(--main-theme-color);\n  line-height: var(--main-line-height);\n}\n\n.subheading-text {\n  color: var(--main-theme-color);\n}\n\n.info-text {\n  color: var(--main-theme-color);\n  margin: 0 auto;\n  max-width: 70%;\n  margin-bottom: 2em;\n}\n\n.footer-text {\n  background-color: var(--main-theme-color);\n  line-height: var(--main-line-height);\n  font-size: 0.75em;\n}\n```\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"_images-css-variables/2.1.1-css-var-demo-managing-colors-themes.png\" alt=\"CSS Variables Demo - Managing Colors Themes\" title=\"CSS Variables Demo - Managing Colors Themes\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image 2.1.1 - CSS Variables Demo - Managing Colors Themes \u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"_images-css-variables/2.1.2-style-css-var-demo-managing-colors-themes.png\" alt=\"CSS Variables Demo - Style Managing Colors Themes\" title=\"CSS Variables Demo - Style Managing Colors Themes\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image 2.1.2 - CSS Variables Demo - Style Managing Colors Themes \u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n2.2. Hover with Fallback support\n---------------------\n\n\u003e **Syntax \u0026 Example**: `2.2-css-var-demo-hover-fallback-support.html`\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\n  \u003chead\u003e\n\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"\u003e\n    \u003ctitle\u003e2.2-css-var-demo-hover-fallback-support.html\u003c/title\u003e\n\n    \u003clink rel=\"stylesheet\" href=\"2.2-style-css-var-demo-hover-fallback-support.css\"\u003e\n  \n  \u003c/head\u003e\n\n  \u003cbody\u003e\n    \n    \u003cdiv class=\"container\"\u003e\n\n      \u003ch1 class=\"top-heading-text\" id=\"topHeadingText\"\u003e2. CSS Variable Demo\u003c/h1\u003e\n      \n      \u003ch2 class=\"subheading-text\" id=\"subHeadingText\"\u003e2.2 - Hover effect with Fallback support\u003c/h2\u003e\n\n      \u003carticle class=\"info-text\"\u003e\n        - Any CSS variables defined in the stylesheet can be `accessed` by using `var()` function \u003cbr/\u003e\n        - The CSS `var()` function can be used to insert the value of a custom property or a CSS variable \u003cbr/\u003e\n        - The var() function cannot be used in any property names, selectors or anything else besides property values setting or providing fallback value support\u003cbr/\u003e \u003cbr/\u003e\n      \u003c/article\u003e\n\n      \u003cnav class=\"button-container\"\u003e\n        \u003cdiv class=\"button btn-default\"\u003ebtn-default \u003c/div\u003e\n        \u003cdiv class=\"button btn-primary\"\u003ebtn-primary \u003c/div\u003e\n        \u003cdiv class=\"button btn-secondary\"\u003ebtn-secondary \u003c/div\u003e\n        \u003cdiv class=\"button btn-success\"\u003ebtn-success \u003c/div\u003e\n        \u003cdiv class=\"button btn-danger\"\u003ebtn-danger \u003c/div\u003e\n        \u003cdiv class=\"button btn-info\"\u003ebtn-info \u003c/div\u003e\n        \u003cdiv class=\"button btn-warning\"\u003ebtn-warning \u003c/div\u003e\n        \u003cdiv class=\"button btn-light\"\u003ebtn-light \u003c/div\u003e\n        \u003cdiv class=\"button btn-dark\"\u003ebtn-dark \u003c/div\u003e\n      \u003c/nav\u003e\n\n    \u003c/div\u003e\n  \n  \u003c/body\u003e\n\n\u003c/html\u003e\n```\n\n\u003e **Syntax \u0026 Example**: `2.2-style-css-var-demo-hover-fallback-support.css`\n\n```css\n:root {\n  /* define/set variables */\n  --main-font-family: Verdana; --main-line-height: 2;\n}\n\nbody {\n  font-family: var(--main-font-family);\n}\n\n.top-heading-text {\n  line-height: var(--main-line-height);\n}\n\n.info-text {\n  color: var(--main-theme-color);\n  line-height: var(--main-line-height);\n  max-width: 70%; margin: 0 auto;\n}\n\n.button {\n  color: var(--main-theme-color, #000000); /* black is fallback color */\n  border: 2px solid var(--main-theme-color, #000000);\n  display: inline-block; padding: 5px; text-align: center; border-radius: 5px; cursor: pointer;\n}\n\n.button:hover {\n  color: #ffffff;\n  border: 2px solid var(--main-theme-color, #000000); background-color: var(--main-theme-color, #000000);\n}\n\n.btn-default {\n  /* no --main-theme-color defined for default button, so it will have theme color as fallback black color */\n}\n\n.btn-primary{\n  --main-theme-color: #007bff;\n}\n\n.btn-secondary{\n  --main-theme-color: #6c757d;\n}\n\n.btn-danger{\n  --main-theme-color: #dc3545;\n}\n\n.btn-success{\n  --main-theme-color: #28a745;\n}\n\n.btn-info{\n  --main-theme-color: #17a2b8;\n}\n\n.btn-warning{\n  --main-theme-color: #ffc107;\n}\n\n.btn-light{\n  --main-theme-color: #dedede\n}\n\n.btn-dark{\n  --main-theme-color: #343a40;\n}\n```\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"_images-css-variables/2.2.1-css-var-demo-hover-fallback-support.png\" alt=\"CSS Variables Demo - Hover effect with fallback support\" title=\"CSS Variables Demo - Hover effect with fallback support\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image 2.2.1 - CSS Variables Demo - Hover effect with fallback support \u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"_images-css-variables/2.2.2-style-css-var-demo-hover-fallback-support.png\" alt=\"Style CSS Variables Demo - Hover effect with fallback support\" title=\"Style CSS Variables Demo - Hover effect with fallback support\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image 2.2.2 - CSS Variables Demo - Style Hover effect with fallback support \u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n2.3. Hover with Transform Transition Amimation\n---------------------\n\n\u003e **Syntax \u0026 Example**: `2.3-css-var-demo-transform-transition.html`\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\n  \u003chead\u003e\n\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"\u003e\n    \u003ctitle\u003e2.3-css-var-demo-transform-transition.html\u003c/title\u003e\n\n    \u003clink rel=\"stylesheet\" href=\"2.3-style-css-var-demo-transform-transition.css\"\u003e\n  \n  \u003c/head\u003e\n\n  \u003cbody\u003e\n    \n    \u003cdiv class=\"container\"\u003e\n\n      \u003ch1 class=\"top-heading-text\" id=\"topHeadingText\"\u003e2. CSS Variable Demo\u003c/h1\u003e\n      \n      \u003ch2 class=\"subheading-text\" id=\"subHeadingText\"\u003e2.3 - Hover effect with Fallback support\u003c/h2\u003e\n      \n      \u003cnav class=\"button-container\"\u003e\n        \u003cdiv class=\"button btn-default\"\u003ebtn-default \u003c/div\u003e\n        \u003cdiv class=\"button btn-primary\"\u003ebtn-primary \u003c/div\u003e\n        \u003cdiv class=\"button btn-secondary\"\u003ebtn-secondary \u003c/div\u003e\n        \u003cdiv class=\"button btn-success\"\u003ebtn-success \u003c/div\u003e\n        \u003cdiv class=\"button btn-danger\"\u003ebtn-danger \u003c/div\u003e\n        \u003cdiv class=\"button btn-info\"\u003ebtn-info \u003c/div\u003e\n        \u003cdiv class=\"button btn-warning\"\u003ebtn-warning \u003c/div\u003e\n        \u003cdiv class=\"button btn-light\"\u003ebtn-light \u003c/div\u003e\n        \u003cdiv class=\"button btn-dark\"\u003ebtn-dark \u003c/div\u003e\n      \u003c/nav\u003e\n\n    \u003c/div\u003e\n  \n  \u003c/body\u003e\n\n\u003c/html\u003e\n```\n\n\u003e **Syntax \u0026 Example**: `2.3-style-css-var-demo-transform-transition.css`\n\n```css\n:root {\n  --main-font-family: Verdana; \n  --animate-translatex-right: translateX(50px);\n}\n\nbody {\n  font-family: var(--main-font-family);\n}\n\n.button {\n  color: var(--main-theme-color, #000000); /* black is fallback color */\n  border: 2px solid var(--main-theme-color, #000000);\n\n  box-shadow: 4px 4px 2px 0px rgba(0, 0, 0, 0.3); \n  width:200px; padding: 5px; text-align: center; border-radius: 5px; cursor: pointer; margin-bottom: 10px; transition: all 0.25s ease-in-out;\n}\n\n.button:hover {\n  color: #ffffff;\n  border: 2px solid var(--main-theme-color, #000000); \n  background-color: var(--main-theme-color, #000000);\n  box-shadow: 0px 0px 7px 2px var(--main-theme-color, #000000);\n  transform: var(--animate-translatex-right);\n  \n  transition: all 0.35s ease-in-out;\n}\n\n.btn-default {\n  /* no --main-theme-color defined for default button, so it will have theme color as fallback black color */\n}\n\n.btn-primary{\n  --main-theme-color: #007bff;\n}\n\n.btn-secondary{\n  --main-theme-color: #6c757d;\n}\n\n.btn-danger{\n  --main-theme-color: #dc3545;\n}\n\n.btn-success{\n  --main-theme-color: #28a745;\n}\n\n.btn-info{\n  --main-theme-color: #17a2b8;\n}\n\n.btn-warning{\n  --main-theme-color: #ffc107;\n}\n\n.btn-light{\n  --main-theme-color: #dedede\n}\n\n.btn-dark{\n  --main-theme-color: #343a40;\n}\n```\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"_images-css-variables/2.3.1-css-var-demo-transform-transition.png\" alt=\"CSS Variables Demo - Hover effect with Transform Transition\" title=\"CSS Variables Demo - Hover effect with Transform Transition\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image 2.3.1 - CSS Variables Demo - Hover effect with Transform Transition \u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"_images-css-variables/2.3.2-style-css-var-demo-transform-transition.png\" alt=\"Style CSS Variables Demo - Hover effect with Transform Transition\" title=\"Style CSS Variables Demo - Hover effect with Transform Transition\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image 2.3.2 - Style CSS Variables Demo - Hover effect with Transform Transition \u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n2.4. CSS variables Cascading\n---------------------\n\n\u003e **Syntax \u0026 Example**: `2.4-css-var-demo-cascading.html`\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\n  \u003chead\u003e\n\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"\u003e\n    \u003ctitle\u003e2.4-css-var-demo-cascading.html\u003c/title\u003e\n\n    \u003clink rel=\"stylesheet\" href=\"2.4-style-css-var-demo-cascading.css\"\u003e\n  \n  \u003c/head\u003e\n\n  \u003cbody\u003e\n    \n    \u003cdiv class=\"container\"\u003e\n\n      \u003ch1 class=\"top-heading-text\" id=\"topHeadingText\"\u003e2. CSS Variable Demo\u003c/h1\u003e\n      \n      \u003ch2 class=\"subheading-text\" id=\"subHeadingText\"\u003e2.4 - CSS Variable Cascading\u003c/h2\u003e\n\n      \u003cdiv class=\"red-container\"\u003e\n        red-container -\u003e Hover to enlarge Blue! +++\n\n        \u003cdiv class=\"green-container\"\u003e\n          green-container -\u003e Hover to enlarge Blue! ++\n\n          \u003cdiv class=\"blue-container\"\u003e\n            \u003cspan class=\"heading-text\"\u003eblue-container -\u003e Hover to enlarge Me! +\u003c/span\u003e\n          \u003c/div\u003e\n\n        \u003c/div\u003e\n\n      \u003c/div\u003e\n        \n    \u003c/div\u003e\n  \n  \u003c/body\u003e\n\n\u003c/html\u003e\n```\n\n\u003e **Syntax \u0026 Example**: `2.4-style-css-var-demo-cascading.css`\n\n```css\n:root {\n  --main-font-family: Verdana; \n  --main-red-color: #dc3545;\n  --main-green-color: #28a745;\n  --main-blue-color: #007bff;\n  --main-padding: 20px 50px 0px 0px;\n  --main-line-height: 3;\n  --main-text-decoration: underline;\n}\n\nbody {\n  font-family: var(--main-font-family);\n}\n\n.red-container {\n  background-color: var(--main-red-color);\n  padding: var(--main-padding);\n  line-height: var(--main-line-height);\n  text-align: right;\n  cursor: pointer;\n}\n\n.green-container {\n  background-color: var(--main-green-color);\n  padding: var(--main-padding);\n  line-height: var(--main-line-height);\n}\n\n.blue-container {\n  background-color: var(--main-blue-color);\n  padding: var(--main-padding);\n  line-height: var(--main-line-height);\n  color: #ffffff;  \n}\n\n.red-container div .heading-text {\n  transition: all 0.2s ease-in;\n}\n\n.heading-text {\n  font-size: var(--font-size, 12px);\n  font-weight: bold;\n}\n\n.blue-container:hover {\n  --font-size: 24px;\n}\n\n.green-container:hover {\n  --font-size: 36px;\n}\n\n.red-container:hover {\n  --font-size: 48px;\n}\n```\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"_images-css-variables/2.4.1-css-var-demo-cascading-default-output.png\" alt=\"CSS Variables Demo - Cascading default output\" title=\"CSS Variables Demo - Cascading default output\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image 2.4.1 - CSS Variables Demo - Cascading default output  \u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"_images-css-variables/2.4.2-css-var-demo-cascading-green-hover.png\" alt=\"CSS Variables Demo - Cascading Green hover output\" title=\"CSS Variables Demo - Cascading Green hover output\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image 2.4.2 - CSS Variables Demo - Cascading Green hover output \u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"_images-css-variables/2.4.3-style-css-var-demo-cascading.png\" alt=\"Style CSS Variables Demo - Cascading\" title=\"Style CSS Variables Demo - Cascading\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image 2.4.3 - Style CSS Variables Demo - Cascading \u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n2.5. JavaScript Theme Switcher\n---------------------\n2.5. JavaScript Theme Color Swatch Switcher\n---------------------\n\n\u003e **Syntax \u0026 Example**: `2.5-css-var-demo-javascript-theme-switcher.html`\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\n  \u003chead\u003e\n\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"\u003e\n    \u003ctitle\u003e2.5-css-var-demo-javascript-theme-switcher.html\u003c/title\u003e\n\n    \u003clink rel=\"stylesheet\" href=\"2.5-style-css-var-demo-javascript-theme-switcher.css\"\u003e\n  \n  \u003c/head\u003e\n\n  \u003cbody\u003e\n    \n    \u003cdiv class=\"container\"\u003e\n\n      \u003cnav class=\"swatches-container\"\u003e\n        \u003cdiv style=\"background-color:#8a2be2;\"\u003e\u003c/div\u003e\n        \u003cdiv style=\"background-color:#ed143d;\"\u003e\u003c/div\u003e\n        \u003cdiv style=\"background-color:#ff8c00;\"\u003e\u003c/div\u003e\n        \u003cdiv style=\"background-color:#00ced1;\"\u003e\u003c/div\u003e\n        \u003cdiv style=\"background-color:#000080;\"\u003e\u003c/div\u003e\n      \u003c/nav\u003e\n\n      \u003ch1 class=\"top-heading-text\" id=\"topHeadingText\"\u003e2. CSS Variable Demo\u003c/h1\u003e\n      \n      \u003ch2 class=\"subheading-text\" id=\"subHeadingText\"\u003e2.5 - CSS Variable JavaScript Theme Switcher\u003c/h2\u003e\n\n      \u003cdiv class=\"content-container\"\u003e\n\n        \u003carticle class=\"info-text\"\u003e\n          The benefits of using variables in CSS are not that much different than from those of using variables in any other programming languages (define/initiate once and use when required). \u003cbr/\u003e \u003cbr/\u003e\n          The beauty of variables is that they let you store your valuables/properties in one place and update it on the fly for several various purposes. \u003cbr/\u003e\n        \u003c/article\u003e\n  \n        \u003cfooter class=\"footer-text\"\u003eThis is footer Text\u003c/footer\u003e\n\n      \u003c/div\u003e\n        \n    \u003c/div\u003e\n    \n    \u003cscript src=\"./2.5-script-variables-javascript-theme-switcher.js\"\u003e\u003c/script\u003e\n\n  \u003c/body\u003e\n\n\u003c/html\u003e\n```\n\n\u003e **Syntax \u0026 Example**: `2.5-style-css-var-demo-javascript-theme-switcher.css`\n\n```css\n:root {\n  --main-font-family: Verdana;\n  --main-theme-color: #8a2be2;\n}\n\nbody {\n  font-family: var(--main-font-family);\n}\n\n.swatches-container div {\n  display: inline-block;\n  width: 20px; \n  height: 20px;\n  margin: 5px;\n  cursor: pointer;\n}\n\n.top-heading-text {\n  color: var(--main-theme-color);\n}\n\n.content-container {\n  background-color: var(--main-theme-color);\n  padding: 20px;\n  color: #ffffff;\n  line-height: 2;\n}\n\n.info-text {\n  padding-bottom: 20px;\n  margin-bottom: 20px;\n  border-bottom: 2px solid #ffffff;\n}\n\n.footer-text {\n  font-size: 0.8em;\n  text-align: center;\n}\n```\n\n\u003e **Syntax \u0026 Example**: `2.5-script-variables-javascript-theme-switcher.js`\n\n```js\nconsole.log('in 2.5-script-variables-javascript-theme-switcher.js');\n\n// get the root element\nvar root = document.querySelector(':root');\n\n// get swatches\nvar swatches = document.querySelectorAll('.swatches-container div');\n\nswatches.forEach((curSwatch) =\u003e {\n  // click on each swatch button\n  curSwatch.addEventListener('click', (evt) =\u003e {\n    // set/replace root style color with currently clicked color\n    root.style.setProperty('--main-theme-color', event.target.style.backgroundColor);\n\n  }) // addEventListener\n}) // forEach\n```\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"_images-css-variables/2.5.1-css-var-demo-javascript-theme-switcher-default.png\" alt=\"CSS Variables Demo -  JavaScript Theme Color Swatch Switcher - Default\" title=\"CSS Variables Demo -  JavaScript Theme Color Swatch Switcher - Default\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image 2.5.1 - CSS Variables Demo -  JavaScript Theme Color Swatch Switcher - Default\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"_images-css-variables/2.5.2-css-var-demo-javascript-theme-switcher-theme-changed.png\" alt=\"CSS Variables Demo -  JavaScript Theme Color Swatch Switcher Theme changed\" title=\"CSS Variables Demo -  JavaScript Theme Color Swatch Switcher Theme changed\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image 2.5.2 - CSS Variables Demo - JavaScript Theme Color Swatch Switcher Theme changed \u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n2.6. Media Query Responsive Layout\n---------------------\n\n\u003e **Syntax \u0026 Example**: `2.6-css-var-demo-media-query-responsive-layout.html`\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\n  \u003chead\u003e\n\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"\u003e\n    \u003ctitle\u003e2.6-css-var-demo-media-query-responsive-layout\u003c/title\u003e\n\n    \u003clink rel=\"stylesheet\" href=\"2.6-style-css-var-demo-media-query-responsive-layout.css\"\u003e\n  \n  \u003c/head\u003e\n\n  \u003cbody\u003e\n    \n    \u003cdiv class=\"container\"\u003e\n\n      \u003ch1 class=\"top-heading-text\" id=\"topHeadingText\"\u003e2. CSS Variable Demo\u003c/h1\u003e\n      \n      \u003ch2 class=\"subheading-text\" id=\"subHeadingText\"\u003e2.6 - CSS Variable Media Query Responsive Layout\u003c/h2\u003e\n\n      \u003csection class=\"section-container\"\u003e\n        \u003carticle\u003eArticle 1\u003c/article\u003e\n        \u003carticle\u003eArticle 2\u003c/article\u003e\n        \u003carticle\u003eArticle 3\u003c/article\u003e\n        \u003carticle\u003eArticle 4\u003c/article\u003e\n      \u003c/section\u003e\n  \n      \u003cfooter class=\"footer-text\"\u003eThis is footer Text\u003c/footer\u003e\n        \n    \u003c/div\u003e\n    \n  \u003c/body\u003e\n\n\u003c/html\u003e\n```\n\n\u003e **Syntax \u0026 Example**: `2.6-style-css-var-demo-media-query-responsive-layout.css`\n\n```css\n:root {\n  --main-font-family: Verdana;\n  --main-grid-column-layout: 1fr 1fr 1fr 1fr;\n  --main-grid-row-layout: 1fr;\n  --main-margin: 20px;\n}\n\nbody {\n  font-family: var(--main-font-family);\n}\n\n.section-container {\n  display: grid;\n  height: 70vh;\n  grid-template-columns: var(--main-grid-column-layout);\n}\n\n.section-container article {\n  margin: var(--main-margin);\n  grid-template-rows: var(--main-grid-row-layout);\n  padding: 10px;\n  background-color: #ababab;\n  text-align: center;\n}\n\n.footer-text {\n  font-size: 0.8em;\n  text-align: center;\n}\n\n@media screen and (max-width: 760px) {\n  :root {\n    --main-font-family: cursive;\n    --main-grid-column-layout: 1fr 1fr;\n    --main-margin: 10px;\n  }\n}\n```\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"_images-css-variables/2.6.1-css-var-demo-media-query-responsive-layout-default-view.png\" alt=\"CSS Variables Demo - Media Query Responsive Layout - Default View\" title=\"CSS Variables Demo - Media Query Responsive Layout - Default View\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image 2.6.1 - CSS Variables Demo - Media Query Responsive Layout - Default View\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"_images-css-variables/2.6.2-css-var-demo-media-query-responsive-layout-mobile-view.png\" alt=\"CSS Variables Demo - Media Query Responsive Layout - Mobile View\" title=\"CSS Variables Demo - Media Query Responsive Layout - Mobile View\" width=\"300\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image 2.6.2 - CSS Variables Demo - Media Query Responsive Layout - Mobile View \u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"_images-css-variables/2.6.3-style-var-demo-media-query-responsive-layout.png\" alt=\"Style CSS Variables Demo - Media Query Responsive Layout\" title=\"Style CSS Variables Demo - Media Query Responsive Layout\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image 2.6.3 - Style CSS Variables Demo - Media Query Responsive Layout \u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n2.7. CSS Variables Gradients\n---------------------\n\n\u003e **Syntax \u0026 Example**: `2.7-css-var-demo-gradients.html`\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\n  \u003chead\u003e\n\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"\u003e\n    \u003ctitle\u003e2.7-css-var-demo-gradients.html\u003c/title\u003e\n\n    \u003clink rel=\"stylesheet\" href=\"2.7-style-css-var-demo-gradients.css\"\u003e\n  \n  \u003c/head\u003e\n\n  \u003cbody\u003e\n    \n    \u003cdiv class=\"container\"\u003e\n\n      \u003ch1 class=\"top-heading-text\" id=\"topHeadingText\"\u003e2. CSS Variable Demo\u003c/h1\u003e\n      \n      \u003ch2 class=\"subheading-text\" id=\"subHeadingText\"\u003e2.7 - CSS Variable Gradients \u003c/h2\u003e\n\n      Linear Gradient:\n      \u003cdiv class=\"gradient-linear-container\"\u003e\u003c/div\u003e \u003cbr/\u003e \u003cbr/\u003e\n      \n      Radial Gradient:\n      \u003cdiv class=\"gradient-radial-container\"\u003e\u003c/div\u003e\n\n        \n    \u003c/div\u003e\n    \n  \u003c/body\u003e\n\n\u003c/html\u003e\n```\n\n\u003e **Syntax \u0026 Example**: `2.7-style-css-var-demo-gradients.css`\n\n```css\n:root {\n  --main-font-family: Verdana;\n  --gradient-color-1: #ff0000;\n  --gradient-color-2: #038703;\n  --gradient-color-3: #ffff00;\n  --gradient-linear: linear-gradient(var(--gradient-color-1), var(--gradient-color-3));\n  --gradient-radial: radial-gradient(circle, var(--gradient-color-1), var(--gradient-color-3), var(--gradient-color-2));\n}\n\nbody {\n  font-family: var(--main-font-family);\n}\n\n.gradient-linear-container {\n  background-image: var(--gradient-linear);\n  height: 200px;\n}\n\n.gradient-radial-container {\n  background-image: var(--gradient-radial);\n  width: 200px;\n  height: 200px;\n}\n```\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"_images-css-variables/2.7.1-css-var-demo-gradients.png\" alt=\"CSS Variables Demo - Gradients\" title=\"CSS Variables Demo - Gradients\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image 2.7.1 - CSS Variables Demo - Gradients \u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"_images-css-variables/2.7.2-style-css-var-demo-gradients.png\" alt=\"Style CSS Variables Demo - Gradients\" title=\"Style CSS Variables Demo - Gradients\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image 2.7.2 - Style CSS Variables Demo - Gradients \u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n3 CSS Variables Resources\n=====================  \n\n\u003e **Reference:** - https://www.w3.org/TR/css-variables/\n\n\u003e **Reference:** - https://www.w3schools.com/css/css3_variables.asp\n\n\u003e **Reference:** - https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdinanathsj29%2Fcss-variables-practical-guide-tutorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdinanathsj29%2Fcss-variables-practical-guide-tutorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdinanathsj29%2Fcss-variables-practical-guide-tutorial/lists"}