CSS Variables

CSS Variables, also known as Custom Properties, introduce a way to define reusable values in CSS. They are entities defined by CSS authors that contain specific values to be reused throughout a document.

Declaration and Syntax

• Declaring a variable:

  :root {
    --main-color: #3498db;
  }

  Here, --main-color is the variable name, and #3498db is the value.

Usage

• Using a variable in a CSS rule:

  body {
    background-color: var(--main-color);
  }

  This assigns the background color of the body element to the value of --main-color.

Key Points

1. :root Selector:

   • Variables are often declared in the :root selector to make them global and accessible throughout the document.

   :root {
     --main-font: 'Arial', sans-serif;
   }

2. Variable Names:

   • Variable names are preceded by two hyphens (--).

   :root {
     --main-background: #f0f0f0;
   }

3. Variable Values:

   • Variables can store various types of values, including colors, numbers, strings, and more.

   :root {
     --border-width: 2px;
     --main-color: #27ae60;
     --font-family: 'Helvetica Neue', sans-serif;
   }

4. Fallback Values:

   • Fallback values can be specified for older browsers that do not support CSS Variables.

   body {
     font-family: var(--font-family, 'Arial', sans-serif);
   }

   This uses 'Arial', sans-serif as a fallback if --font-family is not supported.

Benefits

1. Reusability:

   • Variables allow the reuse of values throughout the stylesheet, promoting consistency and easy updates.

2. Maintainability:

   • Centralizing variable values in one place makes it easier to manage and update styles.

3. Dynamic Changes:

   • Variables can be modified dynamically using JavaScript, enabling changes in real-time.

Example

:root {
  --main-color: #3498db;
  --background-color: #ecf0f1;
  --border-radius: 5px;
}

body {
  background-color: var(--background-color);
  color: var(--main-color);
}

.container {
  border: 1px solid var(--main-color);
  border-radius: var(--border-radius);
}

In this example, the --main-color, --background-color, and --border-radius variables are defined in the :root selector and used throughout the stylesheet.

CSS Variables provide a powerful way to manage and reuse values in CSS, contributing to more maintainable and adaptable stylesheets.