W3.CSS Colors
The default color scheme used in W3.CSS is inspired by Material Design Colors (colors used in marketing, road signs, and sticky notes).
Coloring HTML Elements
The w3-color and w3-text-color classes can be used to color any HTML element:
Containers:
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
Buttons:
Text:
Borders:
Red
Green
Blue
Yellow
Gray
Black
Tables:
| Name | Points |
|---|---|
| Jill Smith | 50 |
| Eve Jackson | 94 |
| Adam Johnson | 67 |
Cards:
A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars are designed to run primarily on roads, to have seating for one to eight people, to typically have four wheels. (Wikipedia)
Background Colors
The w3-color classes set the background color for any HTML element:
London
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
London
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
London
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
Example
<div class="w3-red">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
<div class="w3-yellow">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
<div class="w3-gray">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
Try It Yourself »
The colors gray and grey are interchangeable in all W3.CSS classes.
Text Colors
The w3-text-color classes set the text color of any HTML element:
London
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
London
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
Example
<div class="w3-text-red">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
Hover Colors
The w3-hover-color classes define the background hover color for any HTML element:
London
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
Example
<div class="w3-container w3-orange w3-hover-red">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.</p>
</div>
Try It Yourself »
The w3-hover-text-color classes define the text hover color for any HTML element:
London
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
Example
<div class="w3-container w3-orange w3-hover-text-white">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.</p>
</div>
Try It Yourself »
Color libraries
In addition to standard W3.CSS colors, W3.CSS can also use colors from a lot of different color libraries:
Windows Colors:
Click here to Learn more about Windows colors
Fashion Colors:
Yellow
Spruce
Peony
Port
Click here to Learn more about fashion colors
Highway Colors:
Click here to Learn more about color libraries
You will learn a lot more about colors in later chapters of this tutorial.
