Css Variables

CSS Variables, also known as CSS Custom Properties, allow you to store values in a reusable way within your CSS. They are useful for maintaining consistency across a website and making global changes to styles easy. CSS Variables are defined with a custom property name that starts with -- and are accessed using the var() function

Defining and Using CSS Variables

1) Defining Variables

CSS Variables are defined within a CSS rule, typically within the :root selector to make them globally available throughout the document.

 
:root {
    --primary-color: #4CAF50;
    --secondary-color: #f4f4f4;
    --padding: 10px;
    --font-size: 16px;
}
 

2) Using Variables

To use a CSS variable, you use the var() function, passing the variable name as an argument.

 
body {
    background-color: var(--secondary-color);
    font-size: var(--font-size);
}
 
.header {
    background-color: var(--primary-color);
    padding: var(--padding);
}
 
 

Explanation:

Defining Variables:

In the :root selector, variables such as --primary-color, --secondary-color, --accent-color, --padding, and --font-size are defined. This makes these variables accessible throughout the CSS. Using Variables:

The var() function is used to apply the variables in different CSS rules. For example, var(--primary-color) is used to set the background color of the .header. Hover State:

A pseudo-class (:hover) is used for the button to change its background color on hover. The darken() function, often part of a CSS preprocessor like Sass, would be used to darken the color by 10%.