CSS Variables

• CSS – Introduction
• CSS – Basics
• CSS – Include CSS File to HTML
• CSS – ID and Class
• CSS – Cascading Order
• CSS – Selector
• CSS – Pseudo Classes
• CSS – Colors
• CSS – Gradients
• CSS – Units
• CSS – Background
• CSS – Border
• CSS – Margin and Padding
• CSS – Height and Width
• CSS – Outline
• CSS – Display and Visibility
• CSS – Position
• CSS – Overlapping Elements
• CSS – Overflow
• CSS – Float
• CSS – Clear and Clearfix
• CSS – Left and Right
• CSS – Transform
• CSS – Opacity / Transparency
• CSS – text-shadow
• CSS – box-shadow
• CSS – object-fit
• CSS – Counters
• CSS – Variables
• CSS – Fonts
• CSS – Text Formatting
• CSS – Graphics
• CSS – Links
• CSS – Lists
• CSS – Tables
• CSS – Horizontal & Vertical Align
• CSS – Image Sprite
• CSS – Transitions
• CSS – 2D Transforms
• CSS – 3D Transforms
• CSS – Animations
• CSS – Media Queries
• CSS – Flexbox

Variables

CSS Variables, also known as Custom Properties, is a powerful tool for web developers and designers. They allow for the creation of dynamic, reusable values that can be used across multiple elements and stylesheets.

CSS Variables are created by using the “var” keyword followed by a name and a value. The value can be either a string, number, color or any other valid CSS value. Once declared, the variable can be used in any CSS rule, by using the “var” keyword followed by the name of the variable.

CSS Variables are useful for a variety of reasons. First, they allow developers to create reusable values that can be used in multiple places. This eliminates the need to repeat the same values in different places and makes it easy to make changes in one place and have them applied everywhere.

Second, CSS Variables can help to reduce the size of CSS files. By using variables, developers can use fewer lines of code to accomplish the same task. This reduces the file size and helps to improve page load times.

Third, CSS Variables can help to make CSS easier to maintain. By using variables, developers can make changes in one place and have them applied to multiple elements. This makes it easier to make changes to the design of a website without having to make changes to multiple stylesheets.

Finally, CSS Variables can be used to create dynamic styles. For example, developers can use variables to create a style that changes based on the size of the screen or the orientation of the device. This allows for the creation of responsive designs that look great on any device.

To declare a CSS variable you will have to add a double dash before the name of that var.

body {
    --english-green-color: #1B4D3E;  
}

Now, in order to use the value of the CSS variable, we can use the var(…) function.

.my-green-component{
    background-color: var(--english-green-color);
}

The easiest way to manage your CSS vars is by declaring them into the :root pseudo-class.

:root{
    --english-green-color: #1B4D3E;
}