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.

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.

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);).

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

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

This Course/Tutorial is ideal for:

• Any Web designer/developer interested in getting a deep understanding of CSS Advanced-latest features like CSS Variables-CSS custom properties
• CSS lovers want to acquire knowledge of next/latest CSS level (properties/features)
• Candidates desire to become CSS Expert and better Front End web Developer / Designer
• Web designers/developers who want to improve skills with new web standards
• Anyone who knows CSS and wants to dive deeper with upcoming features
• Anyone wants to sharpen their CSS skills

After completing/attending/finishing this Course/Tutorial, participants should be able to:

• Create your style sheets those are less repetitive and easier to maintain
• Write CSS with less repetition, better readability, and more flexibility
• Use and follow the power of advanced CSS Variables features in huge websites/applications
• Declare and use the CSS variables in the Global and Local Scope
• Understand the difference between CSS variables and Preprocessors like SASS, LESS variables

• Basic/Intermediate knowledge of HTML5 and CSS3
• Basics of JavaScript will be an added advantage

1. Introduction to CSS Variables/Custom Properties
   • 1.1. What are Variables

• CSS is static stylesheet language/mostly a declarative language, lacking in dynamic capabilities/Programming features-terminologies like variables, mixin, function, re-usable classes, etc.
• 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 CSS with CSS3 advanced features i.e. Custom Properties

• Variables are one of the most fundamental and important concepts in any programming language
• A variable is container/holder to store/hold the data/information
• A variable is a kind of data holder where we can store some value for future further programming use or calculation purpose
• A JavaScript variable is simply a name of the storage location (named containers/named storage) for data
• Variables are symbolic names for values
• 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.
• The data or value stored in the variables can be set, updated, and retrieved whenever needed
• Variables let you store and update different values your program needs in order to perform some work
• Variables are declared using the keyword var keyword
• The assignment operator (=) is used to assign value to a variable, like this: var varName = value; or var firstName = 'JavaScript';
• 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
• Example: Variable declaration and assignment is just like Maths & Algebra: x = 10; and in JavaScript we write var x = 10;

Note: Depending on programming language, the different assignment operator like equal to = or colon : is used to assign value to a variable

• For learning/understanding purpose/instance, lets consider the following JavaScript snippet:

// javascript variables - variables defined to hold different types of data var techName = 'JavaScript'; // String literal  var version = 6; // Number literal var isDone = true; // Boolean literal console.log('Learning '+techName+version); var firstName = 'Dinanath '; let lastName = 'Jayaswal' const fullName = firstName + lastName

Syntax & Example: 1.1-javascript-variable.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>1.1-javascript-variable.html</title> <!-- internal style --> <style> /* css selector: { property:value; } */ body { font-family: arial; } </style> </head> <body> <!-- include external JavaScript - body section --> <script src="./1.1-script.js"></script> </body> </html>

Syntax & Example: 1.1-script.js

// external js file // Write all JavaScript code here // variables defined to hold different types of data var techName = 'JavaScript'; // String literal  var version = 6; // Number literal var isDone = true; // Boolean literal console.log('Learning '+techName+version); // ------------------------------ // Declaring Variable var userName; // Assigning value userName = 'Dinanath'; console.log('Welcome '+userName); // ------------------------------ // Declaring multiple variables var firstName = 'Dinanath', lastName = 'Jayaswal', age = 35, isMarried = 'true'; // Declaring multiple variables in multiple lines for readability /* var firstName = 'Dinanath',  lastName = 'Jayaswal',  age = 35,  isMarried = 'true'; */ console.log('I am ' + firstName + ' ' + lastName);