css variable

How can we use css variable with Easy example?

  • June 11, 2024
  • - 164 Comments

That’s fascinating! I will show how to use CSS variables (or called as CSS custom properties) with examples. 😊

They let you manage and reuse value with in your stylesheets which makes it easier for updates to the code.

Create CSS Variables The syntax of a CSS variable is quite simple, it starts with –, for example: and use variables Assumeyour need to provide same box-shadow values in many places.

“Master CSS with our ‘CSS Complete Guide‘ course – your ultimate resource for creating stunning, responsive web designs effortlessly!”

Defining CSS Variables:

CSS variables are defined using the -- prefix and are typically declared within the :root selector, which represents the document’s root element. This makes the variables global, meaning they can be accessed anywhere in the CSS.

Example

:root {
  --main-bg-color: #f0f0f0;
  --main-text-color: #333333;
  --main-padding: 10px;
}

Using CSS Variables

Once you’ve declared your CSS variables, you can use them with the var() function.

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

Here’s a complete example demonstrating the use of CSS variables:

Html Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Variables Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>Welcome to My Website</h1>
  </header>
  <main>
    <p>This is a sample paragraph demonstrating the use of CSS variables.</p>
  </main>
  <footer>
    <p>© 2024 My Website</p>
  </footer>
</body>
</html>

CSS Code

:root {
  --main-bg-color: #f0f0f0;
  --main-text-color: #333333;
  --header-bg-color: #4CAF50;
  --header-text-color: white;
  --main-padding: 20px;
}

body {
  background-color: var(--main-bg-color);
  color: var(--main-text-color);
  padding: var(--main-padding);
  font-family: Arial, sans-serif;
}

header {
  background-color: var(--header-bg-color);
  color: var(--header-text-color);
  padding: var(--main-padding);
  text-align: center;
}

footer {
  text-align: center;
  padding: var(--main-padding);
}

Benefits of Using CSS Variables

  • Maintainability: Easier to manage and update CSS values.
  • Reusability: Use the same values in multiple places.
  • Theming: Easily switch themes by changing the values of variables.

Advanced Usage

Fallback Values

color: var(--undefined-variable, #000000);

Local Scope

CSS variables can also be scoped to a specific element. This means they can be overridden in a specific context.

.card {
  --card-bg-color: white;
  --card-text-color: black;
  background-color: var(--card-bg-color);
  color: var(--card-text-color);
}

.card-dark {
  --card-bg-color: #333333;
  --card-text-color: #f0f0f0;
}
<div class="card">This is a card</div>
<div class="card card-dark">This is a dark card</div>

Conclusion

CSS variables are a powerful tool for making your CSS more flexible and easier to maintain. By using variables, you can ensure consistency across your stylesheets and make global changes with ease.

Some other post

  • CSS
Previous Post
Next Post

164 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Our Courses

Most Recent Posts

  • All Post
  • CSS
  • javascript
  • python
  • SQL
  • SQL wildcards
  • SVG
  • Tools

eBook App for FREE

Lorem Ipsum is simply dumy text of the printing typesetting industry lorem.

Download Now

Join our coding community: Learn, practice, and excel in various programming languages.

Facebook-f Youtube

Company

About Us

Contact Us

Terms & Conditions

Privacy Policy

Products

Sitemap

Our Courses

Best Sellers Course

Help

Help

Privacy Policy

Disclaimer

Copyright 2024 by Refsnes Data. All Rights Reserved. W3runs is created by jayanta sarkar