CSS Variables Tutorial

Enhance your CSS workflow with this CSS Variables tutorial! Learn how to use custom properties to create dynamic, reusable, and maintainable styles. Perfect for developers looking to improve efficiency and flexibility in styling.

Feb 28 2025

Watch on YouTube

Introduction to CSS Variables: Enhancing Website Maintainability

This chapter introduces CSS variables, also known as custom properties, as a powerful tool for improving the maintainability and scalability of website stylesheets. We will explore the challenges of managing large stylesheets, how CSS variables offer a solution, and the benefits of using them compared to traditional preprocessor approaches. This chapter will also guide you through setting up your environment to follow along with practical examples.

The Problem: Repetitive Values in Large Stylesheets

When developing large websites with extensive stylesheets, developers often encounter the issue of repetitive values. These values, such as specific colors, font sizes, or margin values, might be used across numerous CSS rules throughout the stylesheet.

Example Scenario: Imagine a website stylesheet containing multiple rules that all utilize the same shade of blue for text color.

selector-1 {
  color: #007bff; /* Blue color */
}

selector-2 {
  color: #007bff; /* Blue color */
}

selector-3 {
  color: #007bff; /* Blue color */
}
/* ... and many more selectors using the same color */

Maintenance Challenge: While this approach works, it presents a significant maintenance challenge. If you decide to change the website’s color scheme and need to update this blue color, you would have to manually find and modify every single instance of #007bff throughout the entire stylesheet. This process is time-consuming, error-prone, and inefficient, especially in large projects with hundreds or thousands of lines of CSS code.

The Solution: CSS Variables

CSS variables offer an elegant solution to this problem by allowing you to store and reuse values throughout your stylesheet.

CSS Variables (Custom Properties): CSS variables, also known as custom properties, are entities defined by CSS authors that contain specific values to be reused throughout a stylesheet. They allow for dynamic styling and easier maintenance of CSS code.

Instead of hardcoding values directly into each CSS rule, you can define a CSS variable to hold the desired value and then reference this variable in your rules.

Example using CSS Variables:

:root {
  --primary-color: #007bff; /* Define a CSS variable named --primary-color */
}

selector-1 {
  color: var(--primary-color); /* Use the CSS variable */
}

selector-2 {
  color: var(--primary-color); /* Use the CSS variable */
}

selector-3 {
  color: var(--primary-color); /* Use the CSS variable */
}

In this example, --primary-color is a CSS variable defined in the :root pseudo-class (which typically represents the root element of the document, often <html>). The var() function is used to access the value stored in the --primary-color variable within the CSS rules.

Simplified Updates: Now, if you want to change the primary color of your website, you only need to update the value of the --primary-color variable once in the :root block. All selectors that use var(--primary-color) will automatically reflect this change. This drastically simplifies stylesheet maintenance and ensures consistency across your website.

Benefits of Using CSS Variables

Employing CSS variables offers several key advantages for web development:

Improved Maintainability: As demonstrated, updating a value stored in a CSS variable is significantly easier and less error-prone than manually changing multiple instances throughout a stylesheet. This is particularly beneficial for large and complex websites.
Enhanced Consistency: By using variables, you ensure that the same value is consistently applied across your website wherever the variable is referenced. This helps maintain a uniform visual style.
Code Reusability: CSS variables promote code reusability by allowing you to define a value once and use it multiple times. This reduces redundancy and makes your stylesheets cleaner and more organized.
Dynamic Styling: CSS variables can be dynamically updated using JavaScript, enabling interactive and responsive styling changes based on user actions or other events. This opens up possibilities for more dynamic and engaging user interfaces.

CSS Variables vs. Preprocessors: Sass and Less

Traditionally, developers have used CSS preprocessors like Sass and Less to introduce variable-like functionality into CSS.

Sass (Syntactically Awesome Stylesheets) and Less: CSS preprocessors are scripting languages that extend the capabilities of CSS. They allow developers to use features like variables, mixins, functions, and more, which are then compiled into standard CSS that browsers can understand.

While preprocessors like Sass and Less also offer variable features, CSS variables provide distinct advantages, especially in modern web development workflows.

No Transpilation Required: Unlike Sass and Less, CSS variables are a native CSS feature. This means they do not require a compilation step, often referred to as transpiling, to convert the preprocessor code into standard CSS.

Transpiling: Transpiling is a type of compilation that transforms source code from one programming language into another language that has a similar level of abstraction. In the context of CSS preprocessors, transpiling converts Sass or Less code into standard CSS code.
- Simplified Workflow: Eliminating the transpilation step simplifies the development workflow and reduces build complexity.
- Faster Development: Changes made to CSS variables are reflected directly in the browser without the need for recompilation, leading to faster development cycles.
Browser Native: CSS variables are directly understood by web browsers. This eliminates the dependency on preprocessor tools and ensures compatibility across different development environments.
Advanced Capabilities: CSS variables offer features beyond simple value storage, including the ability to be dynamically updated via JavaScript and interact with the browser’s DOM (Document Object Model). These advanced capabilities will be explored in more detail in subsequent chapters.

Understanding CSS Variables: Custom Properties in Detail

CSS variables are formally known as custom properties in the official W3C specification.

W3C Specification: The World Wide Web Consortium (W3C) develops web standards, including specifications for HTML, CSS, and other web technologies. These specifications define how web technologies should work and ensure interoperability across different browsers.

Understanding this terminology is helpful when consulting official documentation or discussing CSS variables within the web development community.

Syntax: CSS variables are defined using a syntax similar to regular CSS properties, but with a crucial distinction: they begin with a double hyphen (--).
- Declaration: --variable-name: value;
- Usage: var(--variable-name)
For example: --my-property: 20px; defines a CSS variable named --my-property with the value 20px.
Scope and Inheritance: Like standard CSS properties, CSS variables are subject to cascading and inheritance rules. They can be defined in different scopes (e.g., :root, specific selectors) and their values can be inherited by child elements. This scoping mechanism provides flexibility and control over variable usage within your stylesheets.

Course Files and Setup

To facilitate hands-on learning, this chapter and subsequent chapters will utilize a simple demo website. The HTML and CSS files for this demo website are available in a GitHub repository.

GitHub Repository: The course files can be accessed on GitHub at the following repository: [Insert GitHub Repository Link Here - The transcript mentions “CSS variables” repository, and the link is provided below the video]. You can access different lesson branches using the branch dropdown menu to follow along with specific chapters.
Text Editor: The examples in this chapter are demonstrated using the Adam text editor. [Insert Adam Text Editor Link Here - The transcript mentions “Adam” and that a link will be provided below]. However, you are free to use any text editor of your choice that you are comfortable with.
Prerequisites: It is assumed that you have a foundational understanding of HTML and CSS before proceeding with this chapter. Familiarity with these technologies is essential for grasping the concepts and effectively utilizing CSS variables.

Browser Support for CSS Variables

At the time of this recording, CSS variables enjoy broad browser support across modern browsers.

Major Browser Compatibility: All major browsers, including Chrome, Firefox, Safari, and Edge, fully support CSS variables.
Internet Explorer Exception: Internet Explorer is a notable exception, as it does not provide native support for CSS variables. However, Microsoft Edge, the successor to Internet Explorer, does support CSS variables.
Progressive Enhancement: For projects requiring compatibility with older browsers like Internet Explorer, consider employing progressive enhancement techniques. This involves building your website with modern CSS features like variables and providing fallback solutions for browsers that do not support them.

Conclusion

CSS variables offer a modern and efficient approach to managing styles in web development. By understanding their benefits, syntax, and browser support, you can leverage CSS variables to create more maintainable, consistent, and dynamic websites. The following chapters will delve deeper into advanced techniques and practical applications of CSS variables, further enhancing your web development skillset.

Introduction to CSS Variables (Custom Properties)

In modern web development, maintaining consistency and making site-wide style changes efficiently are crucial. CSS variables, also known as CSS custom properties, provide a powerful mechanism to achieve this. This chapter will guide you through understanding and utilizing CSS variables to streamline your stylesheets and enhance maintainability.

Understanding CSS Variables

CSS variables allow you to define reusable values within your stylesheets. These values can then be referenced and applied to various CSS properties throughout your project. Think of them as placeholders for values that you might want to change in one place and have those changes propagate across your entire website.

Stylesheet: A stylesheet is a file that contains CSS (Cascading Style Sheets) code, used to define the visual presentation of a website or web application. It dictates how HTML elements are displayed in a browser, including colors, fonts, layout, and more.

As mentioned in the transcript, a common practice is to declare these variables at the beginning of your stylesheet for better organization and easy access:

“alright then so in our stylesheet we have this area at the top where we will be declaring all of our variables now I always like to declare my variables at the top you don’t need to but I think it makes it clearer that way and I know where to find them if I ever need to change them in the future”

Declaring CSS Variables

CSS variables are declared using a specific syntax that distinguishes them from regular CSS properties.

Syntax for Declaration

To declare a CSS variable, you use custom property names that begin with double dashes (--). This prefix signals to the browser that you are defining a variable, not a standard CSS property.

Variables (CSS Custom Properties): In CSS, variables, also known as custom properties, are entities defined by web developers that contain specific values to be reused throughout a stylesheet. They allow for more maintainable and dynamic CSS code by enabling centralized control of styles.

The basic syntax for declaring a CSS variable is as follows:

selector {
  --variable-name: value;
}

Here:

--variable-name: This is the name you choose for your variable. Variable names are case-sensitive and can include letters, numbers, hyphens, and underscores.
value: This is the CSS value you are assigning to the variable. It can be any valid CSS value, such as a color, dimension, font family, or even another variable.

”variables are declared using CSS custom properties and they look like regular CSS properties like margin of font family except in front of them they have the double dash right and you can see them change color in my editor now that says that this is a custom property of variable”

Scope and Selectors

Like standard CSS properties, variables must be declared within a selector. The selector determines the scope of the variable, meaning which parts of your document can access and use it.

Selectors: In CSS, selectors are patterns used to select the HTML elements that you want to style. They are used to target specific elements in the HTML structure to apply CSS rules.

Scope: In programming, scope refers to the context within which a variable or other identifier is defined and can be accessed. In CSS variables, scope determines which elements in the HTML document can use a declared variable.

CSS Properties: CSS properties are the attributes you can use to style HTML elements. They define aspects like color, font size, margin, padding, and many other visual characteristics of elements on a webpage.

The transcript emphasizes that variables cannot be declared outside of a selector:

“like normal CSS properties we have to declare our variables our custom properties inside a selector so all of these things here the body or this thing these are selectors and these CSS properties are declared inside those selectors the same is true for variables so I can’t just make a variable at the top and call this you know my var and then set it to something this is not going to work it has to be declared inside a selector”

Example of Scoping:

Body Selector: If you declare a variable within the body selector, it will be accessible to all elements that are descendants of the <body> element.

”for example we could say body and then declared the variable inside here and that means that everything inside the body tag inside this document would have access to that variable okay”
Header Selector: Declaring a variable in a header selector limits its scope to elements within the <header> element.

”now if this was header for example and we declared our variables inside this selector then all the elements inside the header right here would have access to that variable so they can be scoped”

Global Scope with `:root` Pseudo-class

For variables that you want to be accessible throughout your entire document, the best practice is to declare them within the :root pseudo-class.

:root pseudo-class: In CSS, the :root pseudo-class selector matches the root element of the document. In HTML, this is typically the <html> element. Declaring CSS variables within :root makes them globally available throughout the entire document.

The :root pseudo-class generally represents the <html> element in HTML documents, which is the root element of the entire page. Variables declared within :root are therefore available globally across your stylesheet.

”what I like to do to give access to my variables inside the whole document so that any element can use them is use the route pseudo-class so that is : and then routes and this refers to 99 times out of 100 the HTML tag the root element inside your document so now if we declare our variables here it means that those variables can be used inside the entire document so any other selector essentially can use those variables okay does that make sense cool”

Example Declaration in :root:

:root {
  --theme-color: #007bff; /* Example blue color */
  --link-color: #a52a2a;  /* Example brown color */
}

In this example, --theme-color and --link-color are declared within :root, making them globally accessible for use throughout your stylesheet.

Using CSS Variables

Once you have declared your CSS variables, you can use them to set values for CSS properties. To use a variable, you employ the var() function.

Syntax for Usage

The var() function takes the name of the CSS variable as its argument. The syntax for using a variable is:

property: var(--variable-name);

Here:

property: This is the CSS property you want to set.
var(--variable-name): This is the var() function call, referencing the variable --variable-name. The browser will replace this function call with the value assigned to the variable.

var() function: In CSS, the var() function is used to insert the value of a custom property (CSS variable) into another CSS property. It allows you to reference and use variables that have been previously defined in your stylesheet.

Example Usage:

Let’s consider the example from the transcript, where variables are used to control theme and link colors.

Declare Variables in :root:
```
:root {
  --theme-color: #3498db; /* Blue color for theme */
  --link-color: #c0392b;  /* Red color for links */
}
```
Hex code: A hex code is a way to represent colors in web design and other digital contexts. It uses a six-digit hexadecimal number (preceded by a ’#’) to specify the intensities of red, green, and blue light that make up a color.
Apply Variables to Elements:
```
.banner {
  background-color: var(--theme-color); /* Use --theme-color for banner background */
}

h2 {
  color: var(--theme-color);          /* Use --theme-color for h2 color */
}

a {
  color: var(--link-color);           /* Use --link-color for link color */
}
```
“if we want to use this variable inside another selector for example this thing down here this banner we want it to be that color right all we need to do instead of applying the hex code there is say hey we want to use this variable for the color right here so the way we say we want to use it is by saying var then in parentheses the name of the custom property of the variable now it’s double - don’t forget that then theme - color in our case so let’s save that and refresh over here hopefully it shouldn’t change and it doesn’t because we’re still using this blue color but instead of directly adding that hex right here which is referencing the variable theme color which is that hex code”

Refresh: In the context of web browsers, to refresh a page means to reload it. This action forces the browser to fetch the latest version of the webpage and its associated files (like CSS stylesheets) from the server or cache, applying any recent changes.

Benefits of CSS Variables: Maintainability and Efficiency

The true power of CSS variables becomes apparent when you need to make changes to your website’s styling. By using variables, you can modify a value in one place (the variable declaration) and have that change automatically reflected wherever the variable is used. This significantly improves maintainability and reduces the effort required for site-wide updates.

Maintainability: In software and web development, maintainability refers to the ease with which a system or code can be modified, updated, and repaired over time. CSS variables enhance maintainability by centralizing style definitions, making it easier to update and manage website aesthetics.

Consider the example of changing the theme color from blue to pink:

“the power of variables comes when we want to change the colors on the margin or the different properties on the page so if I want to change the theme color now instead of changing that theme color in two different places and it might be ten different places on a larger website I can just change it in one place inside the very bold declaration right here so I could say instead of using this color blue I’m going to use pink and if we save that now and refresh you can see update in both of these two places because they’re still both just referencing this theme color variable we don’t need to change it down there and we just change it here right so when they reference it it’s updating with pink awesome”

By simply updating the --theme-color variable in the :root declaration, all elements using var(--theme-color) for their color will instantly update to pink. This centralized control is invaluable for large projects and complex stylesheets.

Similarly, changing the link color variable updates all links across the site:

“let’s do the same for the link color so let’s say instead of this brown the color will use hash 333 which is like a charcoal gray refresh over here and hopefully they should update the links all over the page as well awesome”

This demonstrates the efficiency and time-saving benefits of using CSS variables for managing website styles.

Further Exploration: Advantages over Preprocessors

The transcript briefly mentions that the next tutorial will delve into the advantages of CSS variables compared to preprocessors like Sass and Less.

”so there we go that’s how we declare them and how we use them inside the document in the next tutorial what I’ll be doing is going over some of the things that CSS variables can do some of the benefits of it over things like sass and less”

Sass (Syntactically Awesome Stylesheets): Sass is a CSS preprocessor, which is a scripting language that extends CSS by adding features like variables, mixins, functions, and more. It requires processing to compile into standard CSS that browsers can understand.

Less (Leaner Style Sheets): Less is another CSS preprocessor that extends CSS with dynamic behavior, such as variables, mixins, operations and functions. Like Sass, Less code needs to be compiled into standard CSS before browsers can render it.

While CSS variables offer native browser support and dynamic updates, preprocessors like Sass and Less have historically provided similar functionalities and additional features. Exploring the comparative advantages of CSS variables and preprocessors is a crucial next step in understanding the evolving landscape of CSS development.

This chapter has provided a foundational understanding of CSS variables, their declaration, usage, and benefits. As you continue your web development journey, mastering CSS variables will significantly enhance your ability to create and maintain efficient and stylish websites.

Understanding CSS Variables: A Modern Approach to Styling

This chapter explores the benefits of using CSS variables, also known as CSS custom properties, in web development. We will compare them to traditional preprocessor variables like those found in SAS and Less, highlighting the advantages CSS variables offer in terms of workflow and flexibility.

Introduction to CSS Variables and Their Advantages

CSS variables provide a native way to define and reuse values within your stylesheets. Unlike older methods, they offer dynamic capabilities and integrate seamlessly with the browser environment. This chapter will delve into the key advantages that make CSS variables a powerful tool for modern web development.

Benefits of CSS Variables Over Sass and Less Variables

When considering styling solutions, it’s important to understand the distinctions between CSS variables and preprocessor variables like those in SAS and Less. CSS variables offer several key advantages:

No Transpilation Required:

Transpiled: Convert code from one programming language to another similar language. In web development, Sass and Less code is transpiled into standard CSS that browsers can understand.

One of the most significant benefits of CSS variables is that they are directly understood by web browsers. Unlike SAS and Less, which require a compilation step to be converted into standard CSS, CSS variables are a native feature of the language itself.

CSS (Cascading Style Sheets): A stylesheet language used to describe the presentation of a document written in a markup language like HTML. CSS controls aspects like layout, colors, and fonts. SAS (Syntactically Awesome Stylesheets): A CSS preprocessor that extends the capabilities of basic CSS, allowing for features like variables, mixins, and functions, which must be transpiled into standard CSS. Less (Leaner Style Sheets): Another CSS preprocessor similar to Sass, offering dynamic features that are compiled into standard CSS.

This eliminates a build step in your development process, making it faster and simpler to work with styles.
Direct Browser Editing and Real-time Updates:

Because CSS variables are part of the browser’s native CSS engine, they can be directly manipulated within browser developer tools.

Browser: A software application for retrieving, presenting, and traversing information resources on the World Wide Web. Examples include Chrome, Firefox, and Safari. Dev Tools (Developer Tools): A set of web developer tools built directly into browsers that allow web developers to inspect and debug web pages.

You can access these tools by right-clicking on a webpage and selecting “Inspect” or by pressing F12 (in Chrome and other browsers). The developer tools provide a powerful interface for inspecting and modifying webpages in real-time.

Within the developer tools, specifically in the “Elements” panel and “Sources” panel, you can examine the CSS styles applied to different parts of your website.

Elements panel (in Dev Tools): A panel within the browser’s developer tools that displays the HTML structure of a webpage and allows inspection of the CSS styles applied to each element. Sources panel (in Dev Tools): A panel within the browser’s developer tools that allows developers to view the source files of a web page, including CSS files.

Here, you can find and modify CSS variables, also known as CSS custom properties, directly.

CSS custom properties: Variables defined in CSS that can store values and be reused throughout stylesheets, also known as CSS variables.

Changes made to CSS variables in the browser’s “Console” are reflected instantly on the webpage, allowing for immediate visual feedback and efficient debugging.

Console (in Dev Tools): A panel within the browser’s developer tools that serves as a log for errors, warnings, and information, and also allows for executing JavaScript commands.

This interactive editing is not possible with SAS or Less variables. Since SAS and Less are preprocessed, the browser only sees the compiled CSS, not the original preprocessor variables. Any changes made to compiled CSS in the browser will not affect the original SAS or Less files and cannot be directly linked back to the preprocessor variables.

Media Queries and Variable Overriding

Another significant advantage of CSS variables is their ability to be used and overridden within media queries.

Media Queries: A CSS feature that allows you to apply styles based on different characteristics of the user’s device and browser, such as screen width, resolution, and orientation.

This allows for responsive design adjustments controlled directly by variables, a feature that is less straightforward to implement with SAS and Less.

Consider an example using CSS Grid layout to arrange elements on a webpage.

CSS Grid (CSS Grid Layout): A powerful layout system in CSS that allows for two-dimensional arrangements of elements on a webpage, using rows and columns. Grid template columns: A CSS Grid property that defines the number and size of columns in a grid layout.

Initially, a layout might be defined with three equal columns using the grid-template-columns property and the fr unit.

Fraction (fr): A unit in CSS Grid layout representing a fraction of the available space in the grid container. 1fr means one fractional unit of the available space.

:root {
  --layout: 1fr 1fr 1fr; /* Defines a variable named --layout */
}

.container {
  display: grid;
  grid-template-columns: var(--layout); /* Uses the --layout variable */
}

To make the layout responsive, we can use a media query to change the --layout variable for smaller screens.

@media screen and (max-width: 760px) {
  :root {
    --layout: 1fr; /* Overrides --layout for screens smaller than 760px */
  }
}

Selector (CSS Selector): A pattern of elements and other terms that tell the browser which HTML elements should be selected to have certain CSS rules applied to them. Root selector (:root): A CSS pseudo-class selector that matches the root element of the document. In HTML documents, this is typically the <html> element.

Here, we use the :root selector within the media query to redefine the --layout variable. When the screen width is 760 pixels or less, the --layout variable is overridden to 1fr, causing the grid items to stack vertically, each taking up one fraction of the available width. This dynamic adjustment based on screen size is easily achieved with CSS variables and media queries. Implementing similar responsive variable adjustments in SAS or Less requires more complex approaches.

Scoping of CSS Variables

CSS variables offer another powerful feature: scoping. This means you can define variables at different levels of specificity within your CSS and override them within specific selectors.

Scoping (in programming): Refers to the context within a program where a variable or name binding is valid and can be referenced. In CSS variables, scope determines where a variable’s value is applied and if it can be overridden in specific parts of the stylesheet.

Consider a scenario where you have a --link-color variable defined at the root level, applied site-wide.

:root {
  --link-color: brown; /* Example brown color */
}

a {
  color: var(--link-color);
}

Now, if you want to change the link color specifically within the navigation (nav) section of your website, you can easily override the --link-color variable within the nav selector.

nav {
  --link-color: black; /* Overrides --link-color specifically for nav elements */
}

Within the nav element and its descendants, all links will now inherit the black color defined by the overridden --link-color variable. However, outside of the nav, the --link-color will remain the original brown color.

This level of scoping is significantly simpler to achieve with CSS variables compared to SAS or Less. In preprocessors, achieving similar selector-specific variable overrides often requires the use of mixins or more complex variable management strategies.

Mixins (in Sass/Less): Groups of CSS declarations that can be reused throughout stylesheets. They allow for more modular and maintainable code in CSS preprocessors.

Conclusion

CSS variables provide compelling advantages over traditional preprocessor variables like those in SAS and Less. Their native browser support eliminates transpilation, enables real-time browser editing, facilitates dynamic adjustments within media queries, and offers flexible scoping capabilities. For these reasons, CSS variables represent a modern and efficient approach to styling websites, offering greater control and flexibility directly within the browser environment.

Interacting with CSS Variables with JavaScript: Dynamic Theming Tutorial

This chapter explores the powerful interaction between CSS variables and JavaScript, demonstrating how to dynamically manipulate CSS variables using JavaScript. This capability offers a significant advantage over pre-processed CSS variables like those in Sass, which become static after compilation and cannot be directly accessed or modified by JavaScript at runtime.

Introduction: Bridging CSS Variables and JavaScript

One of the key benefits of CSS variables, also known as Custom Properties, is their accessibility and modifiability through JavaScript. Unlike Sass variables, which are processed during the CSS compilation phase and become fixed values in the final stylesheet, CSS variables remain dynamic. This dynamism allows for real-time updates to styles directly from JavaScript, opening up a wide range of possibilities for interactive and dynamic user interfaces.

CSS Variables (Custom Properties): Entities defined within CSS that hold values which can be reused and modified throughout stylesheets. They are declared using a double hyphen prefix (--) and can be accessed and manipulated via both CSS and JavaScript.

To illustrate this interaction, we will create a practical example: a swatch strip that allows users to change the website’s theme color by clicking on different colored blocks.

Setting Up the Swatch Strip: HTML and Initial CSS Styling

First, we need to construct the HTML structure for our swatch strip. This will be a simple set of colored blocks displayed at the top of the webpage, within the header section.

HTML Structure for Swatches

The HTML structure for the swatches is straightforward. We will use a div element to contain all the swatches, and within this div, we will use span elements to represent each individual colored swatch.

<div class="swatches">
    <span style="background-color: #333;"></span>
    <span style="background-color: #f78da7;"></span>
    <span style="background-color: #007bff;"></span>
    <span style="background-color: #ffc107;"></span>
</div>

HTML (HyperText Markup Language): The standard markup language for documents designed to be displayed in a web browser. It defines the structure and content of a webpage.

CSS (Cascading Style Sheets): A stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.

As you can see, each span element has an inline style attribute that sets its background-color. Let’s break down these color values:

#333: A dark charcoal gray color.
#f78da7: A pinkish salmon color (represented in hexadecimal color code).
#007bff: A standard blue color, often used for banners or primary elements.
#ffc107: A mustard yellow color.

Hex Code (Hexadecimal Color Code): A way to specify colors in HTML, CSS, SVG, and other computing applications. It uses a six-digit combination of letters and numbers preceded by a hash symbol (#). Each pair of digits represents the intensity of red, green, and blue color components.

CSS Styling for Swatches

To visually arrange these span elements as blocks in a strip, we need to add some CSS styles. These styles will be applied to the swatches div and the span elements within it.

.swatches {
    /* Styles for the container if needed */
}

.swatches span {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 10px;
    cursor: pointer;
}

Let’s examine these CSS properties:

display: inline-block;: This property allows the span elements to be displayed in a row, like inline elements, but also allows them to have a defined width and height, like block-level elements.
width: 20px; and height: 20px;: These properties set the dimensions of each swatch to be a small square of 20 pixels by 20 pixels.
margin: 10px;: This adds a 10-pixel margin around each swatch, creating space between them.
cursor: pointer;: This changes the mouse cursor to a pointer hand icon when hovering over a swatch, visually indicating that the swatches are interactive and clickable.

After applying these styles, the swatches will appear as a horizontal strip of colored squares at the top of the page.

Implementing JavaScript Interaction for Dynamic Theming

Now, we will use JavaScript to make these swatches interactive. The goal is to detect when a user clicks on a swatch, retrieve the color of the clicked swatch, and then update the website’s theme color to match. This will be achieved by manipulating a CSS variable that controls the theme color.

Creating the JavaScript File

First, create a new JavaScript file named swatches.js. This file will contain the JavaScript code responsible for handling the swatch interactions.

JavaScript: A high-level, often just-in-time compiled language that conforms to the ECMAScript standard. It has dynamic typing, prototype-based object-orientation, and first-class functions. It is used to make webpages interactive.

Selecting HTML Elements in JavaScript

Inside swatches.js, the first step is to select the HTML elements we need to interact with: the swatch span elements and the root element of the document where our CSS variables are defined.

const swatches = document.querySelectorAll('.swatches span');
const root = document.querySelector(':root');

Let’s break down these lines of code:

document.querySelectorAll('.swatches span');: This line uses the querySelectorAll method of the document object.

document.querySelectorAll(): A JavaScript method that returns a static (not live) NodeList representing a list of the document’s elements that match the specified group of selectors. In this case, it selects all span elements that are descendants of an element with the class swatches. It selects all span elements that are descendants of an element with the class swatches and stores them in a constant variable named swatches. This variable now holds a NodeList (an array-like collection) of all the swatch span elements.
document.querySelector(':root');: This line uses the querySelector method of the document object.

document.querySelector(): A JavaScript method that returns the first element that matches a specified CSS selector(s) in the document. In this case, it selects the :root pseudo-class. It selects the :root pseudo-class, which in most browsers refers to the <html> element, and stores it in a constant variable named root. The :root selector is commonly used in CSS to define global CSS variables.

:root selector: A CSS pseudo-class that matches the root element of the document tree. In HTML, this is almost always the <html> element. It is often used to define global CSS variables that can be accessed throughout the entire document.

Adding Event Listeners to Swatches

Next, we need to add event listeners to each swatch element. An event listener allows us to execute a specific function when a particular event occurs on an element. In this case, we want to listen for click events on each swatch.

swatches.forEach(swatch => {
    swatch.addEventListener('click', (event) => {
        // Code to execute when a swatch is clicked
    });
});

Let’s understand this code block:

swatches.forEach(swatch => { ... });: This line iterates over each element in the swatches NodeList using the forEach method.

forEach(): A method available on NodeList and arrays in JavaScript that executes a provided function once for each element in the NodeList or array. For each swatch element in the swatches list, the provided function (an arrow function in this case) will be executed.
swatch.addEventListener('click', (event) => { ... });: Inside the forEach loop, for each swatch, we attach an event listener using the addEventListener method.

addEventListener(): A JavaScript method that attaches an event handler to the specified element. It takes the event type as its first argument and the function to be executed when the event occurs as its second argument. This line adds a click event listener to the current swatch element. When a click event occurs on a swatch, the provided function (another arrow function) will be executed.
(event) => { ... }: This is an arrow function that serves as the event handler for the click event.

Arrow Function: A concise way to define functions in JavaScript, introduced in ECMAScript 6. Arrow functions have a shorter syntax compared to traditional function expressions and lexically bind the this value. It takes an event object as a parameter. This event object contains information about the click event that occurred.

Event Listener: A procedure or function in JavaScript that waits for a specific event to occur on an HTML element, such as a click, mouseover, or keypress. When the event occurs, the associated event listener function is executed.

Event Object: An object in JavaScript that is automatically passed to event handler functions when an event occurs. It contains properties and methods that provide information about the event, such as the target element, the type of event, and mouse coordinates.

Accessing the Clicked Swatch’s Color and Setting the CSS Variable

Within the event handler function, we need to:

Determine which swatch was clicked.
Get the background color of the clicked swatch.
Set the CSS variable --theme-color on the :root element to this color.

swatches.forEach(swatch => {
    swatch.addEventListener('click', (event) => {
        const clickedSwatch = event.target;
        const swatchColor = clickedSwatch.style.backgroundColor;
        root.style.setProperty('--theme-color', swatchColor);
    });
});

Let’s break down the code inside the event handler:

const clickedSwatch = event.target;: event.target refers to the specific HTML element that triggered the event, which in this case is the clicked span swatch.

event.target: A property of the JavaScript event object that refers to the element that triggered the event.
const swatchColor = clickedSwatch.style.backgroundColor;: This line accesses the style property of the clickedSwatch element.

style Property (JavaScript): A property of HTML elements in JavaScript that provides access to the inline styles of the element as a CSSStyleDeclaration object. It allows you to get and set inline CSS styles directly from JavaScript. It then retrieves the value of the backgroundColor property from the inline style of the clicked swatch and stores it in the swatchColor variable.
root.style.setProperty('--theme-color', swatchColor);: This line accesses the style property of the root element (which represents the <html> element). It then uses the setProperty method to set a CSS property.

setProperty(): A method of the CSSStyleDeclaration interface in JavaScript that allows you to set a CSS property value on an element’s style object. It takes the property name as its first argument and the property value as its second argument. The first argument '--theme-color' is the name of the CSS variable we want to modify. The second argument swatchColor is the value we want to set for this variable, which is the background color of the clicked swatch.

Linking JavaScript to HTML

Finally, to make the JavaScript code execute when the webpage is loaded, we need to link the swatches.js file to our HTML document. This is done by adding a <script> tag just before the closing </body> tag in the HTML file.

<body>
    <!-- ... your HTML content ... -->

    <script src="swatches.js"></script>
</body>

<script> tag: An HTML tag used to embed or link to executable scripts, typically JavaScript, within an HTML document. The src attribute is used to specify the URL of an external script file.

src attribute: An attribute used in HTML tags like <script>, <img>, <iframe>, etc., to specify the source (URL) of an external resource, such as a script file, image, or another HTML document.

This <script> tag with the src="swatches.js" attribute tells the browser to load and execute the JavaScript code in the swatches.js file when the HTML document is parsed.

Testing and Verification

After implementing the HTML, CSS, and JavaScript code, it’s time to test the functionality. Open the HTML file in a web browser. You should see the swatch strip at the top.

Click on each swatch. If everything is set up correctly, you should observe the following:

When you click on a swatch, the website’s theme color (assuming you have CSS rules that use the --theme-color variable) should dynamically change to the color of the clicked swatch.
You can inspect the <html> element in the browser’s developer tools (usually by right-clicking on the page and selecting “Inspect” or “Inspect Element”).

Console (Browser Console): A tool available in web browsers’ developer tools that provides a way to log information, debug JavaScript code, and interact with the webpage using JavaScript commands. It’s often used for error reporting and development purposes. Elements (Browser Inspector): A tab in web browsers’ developer tools that allows you to inspect the HTML structure and CSS styles of a webpage in real-time. You can examine and modify HTML elements and CSS properties directly in the browser. Navigate to the “Elements” tab and select the <html> element. You should see that the inline style of the <html> element is being updated whenever you click a swatch. Specifically, the --theme-color property in the style attribute of the <html> element will be changing to reflect the color of the swatch you clicked.

If you encounter any issues, check the browser’s console for JavaScript errors. Common errors might include typos in variable names, incorrect CSS selectors, or syntax errors in the JavaScript code.

Conclusion: Dynamic Styling with CSS Variables and JavaScript

This chapter demonstrated a fundamental yet powerful technique: using JavaScript to interact with and dynamically update CSS variables. By combining CSS variables with JavaScript event handling and DOM manipulation, we can create highly interactive and customizable user interfaces.

This example of a swatch strip is a simple illustration, but the principles can be extended to more complex scenarios, such as:

User-configurable themes with more comprehensive style adjustments.
Real-time updates to visual elements based on user input or data changes.
Interactive visualizations and dashboards that respond dynamically to data.

CSS variables, when combined with the programmability of JavaScript, offer a flexible and efficient way to manage and manipulate styles in web applications, paving the way for more dynamic and engaging user experiences. This introduction provides a foundation for further exploration and experimentation with CSS variables and their interaction with JavaScript to create even more sophisticated and dynamic web designs.

CSS Variables Tutorial

Introduction to CSS Variables: Enhancing Website Maintainability

The Problem: Repetitive Values in Large Stylesheets

The Solution: CSS Variables

Benefits of Using CSS Variables

CSS Variables vs. Preprocessors: Sass and Less

Understanding CSS Variables: Custom Properties in Detail

Course Files and Setup

Browser Support for CSS Variables

Conclusion

Introduction to CSS Variables (Custom Properties)

Understanding CSS Variables

Declaring CSS Variables

Syntax for Declaration

Scope and Selectors

Global Scope with :root Pseudo-class

Using CSS Variables

Syntax for Usage

Benefits of CSS Variables: Maintainability and Efficiency

Further Exploration: Advantages over Preprocessors

Understanding CSS Variables: A Modern Approach to Styling

Introduction to CSS Variables and Their Advantages

Benefits of CSS Variables Over Sass and Less Variables

Media Queries and Variable Overriding

Scoping of CSS Variables

Conclusion

Interacting with CSS Variables with JavaScript: Dynamic Theming Tutorial

Introduction: Bridging CSS Variables and JavaScript

Setting Up the Swatch Strip: HTML and Initial CSS Styling

HTML Structure for Swatches

CSS Styling for Swatches

Implementing JavaScript Interaction for Dynamic Theming

Creating the JavaScript File

Selecting HTML Elements in JavaScript

Adding Event Listeners to Swatches

Accessing the Clicked Swatch’s Color and Setting the CSS Variable

Linking JavaScript to HTML

Testing and Verification

Conclusion: Dynamic Styling with CSS Variables and JavaScript

Global Scope with `:root` Pseudo-class