Root

With variables for font sizes, your layout remains flexible and adaptable. If the base font size changes, there’s no need to adjust every instance manually. Instead, control the size centrally using var() for all values—practical, efficient, and elegantly streamlined!

:root {
    --base-font-size: 16px;
}
body {
    font-size: var(--base-font-size);
}

The font size of the entire body element is set to 16 pixels using the variable –base-font-size.

In the :root class, you can define variables for colors that can be used throughout your CSS. This means if the color scheme of your page changes, you only need to adjust it in one place: the :root class!

:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
}
h1 {
    color: var(--primary-color);
}

The headings in the h1 element are styled with the primary color #3498db defined in :root as their text color.

Use :root to define layout dimensions that adapt responsively across various devices. This is especially helpful when defining spacing, widths, or heights for a responsive design. For instance, set the maximum width of your layout in the :root class.

:root {
    --container-width: 1200px;
}
.container {
    max-width: var(--container-width);
    margin: 0 auto;
}

The .container class adjusts its maximum width to the value of 1200px defined in :root and centers itself.

By defining padding variables in :root, you can flexibly adjust the spacing across your entire layout for a harmonious design. While you can apply global padding values, specific sections can still have unique paddings that seamlessly integrate into the overall design.

:root {
    --padding-small: 10px;
    --padding-medium: 20px;
}
.container {
    padding: var(--padding-medium);
}

The .container class uses a middle padding value of 20px, defined in :root, to ensure consistent spacing within the container.

Sometimes, general variables in the :root class aren’t enough—you may need specific values for certain sections of your webpage. Nested variables allow you to adjust themes or areas flexibly without altering the overall design.

Here, the global :root class defines default colors and font sizes. For specialized areas, such as a .dark-theme class, these values are selectively overridden. This lets you easily create distinct themes or style sections individually while maintaining the integrity of your foundational variables—a powerful trick for anyone experimenting with diverse layout styles!

:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --font-size: 16px;
}
.dark-theme {
    --primary-color: #1abc9c;
    --secondary-color: #e74c3c;
}
body {
    color: var(--primary-color);
    font-size: var(--font-size);
}
p {
    background-color: var(--secondary-color);
}
.dark-theme p {
    background-color: var(--secondary-color);
}

This CSS sets global standard colors and font sizes in :root and overrides them within the .dark-theme class. As a result, the body and p elements dynamically change their color schemes depending on the active theme.