How to use Inline CSS Variable in Html

CSS variables, known as custom properties, are a handy tool for managing and reusing styles in web projects. Technically used in stylesheets, they can also be applied directly within HTML for more dynamic and flexible styling. If you're new to CSS variables, check out my article on how to use CSS variables like a pro.

Understanding Inline CSS

Inline CSS is the process that involves adding CSS styles directly to an HTML element using the style attribute. Here's a simple example:

html
<p style="color: red;">This is a paragraph.</p>

This technique comes in handy when you want to add dynamic styling via JavaScript or style a single element without affecting others, avoiding the need for a separate stylesheet.

What are Inline CSS Variables?

Inline CSS variables are simply CSS variables used directly within the style attribute of an HTML element. This approach offers a dynamic and isolated method for styling.

How to Use CSS Variables Inline

To apply CSS variables inline in HTML, set the style attribute of an HTML element directly. For instance:

html
<div>
  <p>This is a paragraph.</p>
  <p style="--primary-color: goldenrod;">
    The is a paragraph styled using inline CSS variable.
  </p>
  <p style="--primary-color: lightgreen;">
    The is another paragraph styled using inline CSS variable.
  </p>
</div>

css
p {
  color: var(--primary-color);
}

In this demo, the style attribute of the second <p> element sets the --primary-color variable to goldenrod. The CSS variable is then used to style the text color of the paragraph.

Why Use CSS Variables Inline?

Although CSS variables are typically used in stylesheets, integrating them inline in HTML offers several advantages:

1. Dynamic Styling: Imagine you have a weather app that displays temperature with color-coded indicators. You can use inline CSS variables to dynamically adjust the background color of a temperature display based on the temperature range:

   html
   <div class="temperature" style="--bg-color: var(--cold);">10°C</div>

   js
   <script>
     const temperatureElement = document.querySelector(".temperature");
     const temperature = 10;
   
     if (temperature < 0) {
       temperatureElement.style.setProperty("--bg-color", "var(--freezing)");
     } else if (temperature > 30) {
       temperatureElement.style.setProperty("--bg-color", "var(--hot)");
     } else {
       temperatureElement.style.setProperty("--bg-color", "var(--moderate)");
     }
   </script>

   Here, the --bg-color variable dynamically represents the temperature's severity level.

2. Isolated Components: Consider a scenario where you have a modular card component used in different sections of your website. Users can customize each card's background color independently without affecting others:

   html
   <div class="card" style="--card-bg-color: #f0f0f0;">
     <p>This is a customizable card.</p>
   </div>
   
   <div class="card" style="--card-bg-color: #ffeecc;">
     <p>Another customizable card.</p>
   </div>

   In this way, users can tailor the appearance of each card individually.

3. Inline Styles: Suppose you're creating a blog where authors can highlight specific paragraphs with different background colors. Inline CSS variables provide a cleaner approach for managing these inline styles:

   html
   <div class="highlight" style="--bg-color: #ffeb3b;">
     <p>This paragraph is highlighted for emphasis.</p>
   </div>

   Authors can easily adjust the --bg-color variable to customize the highlight color for different paragraphs.

Conclusion

Now that you know about inline CSS variables, feel free to use them in your HTML for dynamic and personalized styling. It's a handy tool that adds simplicity to your styling toolkit. Give it a try and enjoy the flexibility it brings to your web projects! Till next time, byeee!

Frequently Asked Questions

<p style="color: red;">This is a paragraph.</p>

<div style={{ "--primary-color": "blue" }}>
        {/* Your component content */}
      </div>

:root {
      --primary-color: blue;
    }

var()

 p {
        color: var(--primary-color);
      }

Discover your path in tech with Tech Career Roadmap! Free ebooks, courses, articles, & tools. From coding to no-code, start or switch careers effortlessly.