Declaring CSS Variables

« Prev Next »

CSS variables (also known as custom properties) are entities defined by CSS authors (filenames.css) to store specific values to be reused throughout a document.

 

What are CSS Variables?

CSS variables are elements that contain specific values to store the values for property in css. Properties can be updated globally, by referencing their containing element.

 

Syntax for Declaring CSS Variables

--variable-name: value;
  • --variable-name: The name of the variable. It must start with -- and can contain letters, digits, hyphens, and underscores.
  • value: The value that the variable will hold (e.g., color, font size, margins).

Example: Declaring and Using CSS Variables

/* Declare CSS variables */
:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --font-size: 16px;
}

/* Use CSS variables */
body {
  font-size: var(--font-size); /* Use font size variable */
  background-color: var(--primary-color); /* Use primary color */
}

h1 {
  color: var(--secondary-color); /* Use secondary color for headings */
}
Run ›
  • :root: The :root selector represents the highest level of the document, typically the <html> element. CSS variables declared in :root are globally accessible.
  • --primary-color, --secondary-color, --font-size: These are the custom properties (CSS variables) defined in the :root selector.
  • var(--primary-color): This is how you use the CSS variable inside other styles. The var() function retrieves the value of the variable.

Scope of CSS Variables

CSS variables can have different scopes depending on where they are declared.

 

Global Scope:

If a variable is declared in :root, it can be used throughout the entire document.

 

:root {
  --global-color: #e74c3c; /* Global variable */
}

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

h1 {
  color: var(--global-color);
}

Example

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Update CSS Variables</title>
  <style>
    :root {
      --bg-color: #f0f0f0;
      --text-color: #333;
    }

    body {
      background-color: var(--bg-color);
      color: var(--text-color);
    }

    button {
      padding: 10px 20px;
      background-color: #3498db;
      color: white;
      border: none;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <button onclick="changeTheme()">Change Theme</button>

  <script>
    function changeTheme() {
      document.documentElement.style.setProperty('--bg-color', '#2ecc71');
      document.documentElement.style.setProperty('--text-color', '#fff');
    }
  </script>
</body>
</html>
Run ›
« Prev Next »

Quickly Find What You Are Looking For

OnlineTpoint is a website that is meant to offer basic knowledge, practice and learning materials. Though all the examples have been tested and verified, we cannot ensure the correctness or completeness of all the information on our website. All contents published on this website are subject to copyright and are owned by OnlineTpoint. By using this website, you agree that you have read and understood our Terms of Use, Cookie Policy and Privacy Policy.