Toggle navigation
TUTORIAL HOME
W3.CSS Colors
❮ Previous Next ❯
Modern Colors
W3.CSS color classes are inspired by modern colors used in marketing, road signs, and sticky notes, like:
Red
Green
Blue
Black
Pink
Teal
Indigo
Brown
Orange
Cyan
Purple
Gray
Yellow
Lime
Khaki
Lightgray
W3.CSS Color Classes
W3.CSS provides the following color classes:
Class Defines
w3-color A background color for an element
w3-text-color A text color for an element
w3-hover-color The hoverable background color for an element
w3-hover-text-color The hoverable text color for an element
*color can be any predefined W3.CSS color name.
Background Colors
The w3-color class is used to set a background color for an 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-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>
»
Text Color
The w3-text-color class is used to set the text color for an 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>
»
W3.CSS Color Classes
The w3-color classes can be used on any HTML element.
w3-red
w3-pink
w3-purple
w3-deep-purple
w3-indigo
w3-blue
w3-light-blue
w3-cyan
w3-aqua
w3-teal
w3-green
w3-light-green
w3-lime
w3-sand
w3-khaki
w3-yellow
w3-amber
w3-orange
w3-deep-orange
w3-blue-grey
w3-brown
w3-light-grey
w3-grey
w3-dark-grey
w3-black
w3-pale-red
w3-pale-yellow
w3-pale-green
w3-pale-blue
W3.CSS Text Color Classes
The w3-text-color classes can be used on any HTML element.
On Black
w3-text-red
w3-text-blue
w3-text-green
w3-text-yellow
w3-text-grey
w3-text-black
w3-text-white
On Grey
w3-text-red
w3-text-blue
w3-text-green
w3-text-yellow
w3-text-grey
w3-text-black
w3-text-white
On White
w3-text-red
w3-text-blue
w3-text-green
w3-text-yellow
w3-text-grey
w3-text-black
w3-text-white
Hover Colors
The w3-hover-color and w3-hover-text-color classes support all the colors above as hoverable background colors and hoverable text colors.
Use the w3-hover-color class to change the background color when hovering over an element:
London
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
Use the w3-hover-text-color class to change the text color when hovering over an 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-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-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>
»
Coloring Elements
The w3-color and w3-text-color classes can be used to color every element you like:
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:
Teal Blue YellowOrange Red Purple
Text:
Red Purple Blue Green Orange
Borders:
Red Green Blue Black Orange
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)
❮ Previous Next ❯
TUTORIAL HOME
W3.CSS Colors
❮ Previous Next ❯
Modern Colors
W3.CSS color classes are inspired by modern colors used in marketing, road signs, and sticky notes, like:
Red
Green
Blue
Black
Pink
Teal
Indigo
Brown
Orange
Cyan
Purple
Gray
Yellow
Lime
Khaki
Lightgray
W3.CSS Color Classes
W3.CSS provides the following color classes:
Class Defines
w3-color A background color for an element
w3-text-color A text color for an element
w3-hover-color The hoverable background color for an element
w3-hover-text-color The hoverable text color for an element
*color can be any predefined W3.CSS color name.
Background Colors
The w3-color class is used to set a background color for an 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-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>
»
Text Color
The w3-text-color class is used to set the text color for an 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>
»
W3.CSS Color Classes
The w3-color classes can be used on any HTML element.
w3-red
w3-pink
w3-purple
w3-deep-purple
w3-indigo
w3-blue
w3-light-blue
w3-cyan
w3-aqua
w3-teal
w3-green
w3-light-green
w3-lime
w3-sand
w3-khaki
w3-yellow
w3-amber
w3-orange
w3-deep-orange
w3-blue-grey
w3-brown
w3-light-grey
w3-grey
w3-dark-grey
w3-black
w3-pale-red
w3-pale-yellow
w3-pale-green
w3-pale-blue
W3.CSS Text Color Classes
The w3-text-color classes can be used on any HTML element.
On Black
w3-text-red
w3-text-blue
w3-text-green
w3-text-yellow
w3-text-grey
w3-text-black
w3-text-white
On Grey
w3-text-red
w3-text-blue
w3-text-green
w3-text-yellow
w3-text-grey
w3-text-black
w3-text-white
On White
w3-text-red
w3-text-blue
w3-text-green
w3-text-yellow
w3-text-grey
w3-text-black
w3-text-white
Hover Colors
The w3-hover-color and w3-hover-text-color classes support all the colors above as hoverable background colors and hoverable text colors.
Use the w3-hover-color class to change the background color when hovering over an element:
London
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
Use the w3-hover-text-color class to change the text color when hovering over an 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-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-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>
»
Coloring Elements
The w3-color and w3-text-color classes can be used to color every element you like:
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:
Teal Blue YellowOrange Red Purple
Text:
Red Purple Blue Green Orange
Borders:
Red Green Blue Black Orange
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)
❮ Previous Next ❯
No comments:
Post a Comment