W3.CSS Variables
What Is a CSS Variable?
A CSS variable stores a value, such as a color or a font size.
W3.CSS uses variable for default fonts, colors, and fonst sizes.
Variables let you customize W3.CSS from your own stylesheet.
You do not need to edit the W3.CSS file.
Note
W3.CSS variables is a version 6 feature.
Version 6 is now in final beta, and is expected to be released in November 2026.
How to Create CSS Variables
A CSS variable name starts with two hyphens (--).
Syntax
<style>
:root {
--myBackground;
}
</style>
CSS reads variable values with the CSS var() function.
Syntax
<body style="background-color: var(--myBackground);">
Example
<!DOCTYPE html>
<html lang="en">
<style>
:root {
--myBackground;
}
</style>
<body style="background-color: var(--myBackground);">
<h1>My Heading</h1>
<p>This is a paragraph.</p>
</body>
Try It Yourself »
Change W3.CSS Variables
You can change the default W3.CSS variables without editing W3.CSS.
Load W3.CSS first, then set your values in a <style> element.
Example
<link rel="stylesheet" href="https://www.w3schools.com/w3css/6/w3.css">
<style>
:root {
--w3-font-family: Arial, sans-serif;
--w3-heading-font-family: Georgia, serif;
}
</style>
<body>
<h1>My Heading</h1>
<p>This is a paragraph.</p>
</body>
Try It Yourself »
The --w3-font-family variable changes the default body font to Arial.
The --w3-heading-font-family variable changes the default heading font to Georgia.
The :root selector makes these values available throughout the page.
Another Example
<link rel="stylesheet" href="/w3css/6/w3.css">
<style>
:root {
--w3-font-family: Arial, sans-serif;
--w3-surface-alt: #e8f2ff;
--w3-border-color: #8aa9c7;
}
</style>
<body>
<table class="w3-table-all">
<tr><th>Name</th><th>City</th></tr>
<tr><td>Anna</td><td>Oslo</td></tr>
</table>
</body>
Try It Yourself »
--w3-surface-alt supplies the background color for alternating table rows.
--w3-border-color supplies the default border color.
The font changes across the whole web page.
The table uses the new border and alternating row colors.
Change Variables in One Section
Set variables on a container to give its elements different values.
Example
<style>
.myDiv {
--w3-surface-alt: #fff5d6;
--w3-border-color: #c69a35;
}
</style>
<div class="myDiv">
<table class="w3-table-all">
<tr><th>Item</th></tr>
<tr><td>Apples</td></tr>
</table>
</div>
Try It Yourself »
Only the table inside .myDiv gets these values.
CSS variables inherit from the container, so the table uses the values set on its parent.
Change Dark Mode Variables
Add w3-dark-mode to the body to use the dark mode values.
To change those values, set the variables on .w3-dark-mode in CSS loaded after W3.CSS.
Example
<style>
.w3-dark-mode {
--w3-page-bg: #20242a;
--w3-text-color: #f1f1f1;
--w3-surface-alt: #303640;
}
</style>
<body class="w3-dark-mode">
<h1>Dark Mode</h1>
<p>A page with custom dark colors.</p>
</body>
Try It Yourself »
Change Alert Colors
Each alert has separate variables for its background and text colors.
Change both colors together to keep the text readable.
Example
<style>
:root {
--w3-success-bg: #15694b;
--w3-success-text: #fff;
}
</style>
<div class="w3-panel w3-success">
<p>Your changes were saved.</p>
</div>
Try It Yourself »
In the W3.CSS stylesheet, .w3-success uses both variables.
W3.CSS Variable Reference
These are the variables and default values in W3.CSS.
Typography
| Variable | Default value |
|---|---|
--w3-font-family | Verdana,sans-serif |
--w3-heading-font-family | "Segoe UI",Arial,sans-serif |
--w3-font-size | 15px |
--w3-line-height | 1.5 |
:root {
color-scheme: light;
--w3-font-family: Verdana,sans-serif;
--w3-heading-font-family: "Segoe UI",Arial,sans-serif;
--w3-font-size: 15px;
--w3-line-height: 1.5;
}
Page and Surfaces
| Variable | Default value |
|---|---|
--w3-page-bg | #fff (white) |
--w3-text-color | #000 (black) |
--w3-surface | #fff (grey) |
--w3-surface-alt | #f1f1f1 (light-grey) |
--w3-codespan-text | #d2143a (red) |
{
--w3-page-bg: #fff;
--w3-text-color: #000;
--w3-surface: #fff;
--w3-surface-alt: #f1f1f1;
--w3-codespan-text: #d2143a;
}
A variable affects a style only where W3.CSS uses that variable with var().
Fixed color classes such as .w3-white and .w3-blue keep their own colors.
Borders and Hover
| Variable | Default value |
|---|---|
--w3-border-color | #ccc |
--w3-border-light | #ddd |
--w3-hover-bg | #ccc |
--w3-hover-text | #000 |
{
--w3-border-color: #ccc;
--w3-border-light: #ddd;
--w3-hover-bg: #ccc;
--w3-hover-text: #000;
}
Alerts
| Variables | Background / text |
|---|---|
--w3-danger-bg, --w3-danger-text | #dd0000 / #fff |
--w3-note-bg, --w3-note-text | #fff599 / #000 |
--w3-info-bg, --w3-info-text | #0a6fc2 / #fff |
--w3-warning-bg, --w3-warning-text | #ffb305 / #000 |
--w3-success-bg, --w3-success-text | #008a00 / #fff |
Alerts:
{
--w3-danger-bg:#dd0000;
--w3-danger-text:#fff;
--w3-note-bg:#fff599;
--w3-note-text:#000;
--w3-info-bg:#0a6fc2;
--w3-info-text:#fff;
--w3-warning-bg:#ffb305;
--w3-warning-text:#000;
--w3-success-bg:#008a00;
--w3-success-text:#fff;
}
Dark Mode Defaults
Dark mode sets color-scheme: dark and gives these variables new values:
Dark Mode
.w3-dark-mode{
color-scheme: dark;
--w3-page-bg: #121212;
--w3-text-color: #f1f1f1;
--w3-surface: #1e1e1e;
--w3-surface-alt: #2b2b2b;
--w3-codespan-text: #ff8ea2;
--w3-border-color: #555;
--w3-border-light: #444;
--w3-hover-bg: #4a4a4a;
--w3-hover-text: #fff;
background-color: var(--w3-page-bg);
color: var(--w3-text-color);
}
body.w3-dark-mode{min-height:100vh}
.w3-dark-mode ::placeholder{color:#bbb;opacity:1;}
