W3.CSS supports a rich set of color classes. These color classes are inspired and developed considering the colors used in marketing, road signs, and sticky notes.
- w3-red
- w3-pink
- w3-purple
- w3-deep-purple
- w3-indigo
- w3-blue
- w3-light-blue
- w3-cyan
- w3-teal
- w3-green
- w3-light-green
- w3-lime
- 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
Color Themes
W3.CSS provides excellent support for applying a theme to a website using its public domain theme css. Some of the examples are given below:
| CSS Name | Description |
|---|
| w3-theme-indigo.css | CSS having Indigo variant colors |
| w3-theme-red.css | CSS having Red variant colors |
In order to use themes, go to the
https://www.w3schools.com/w3css/w3css_downloads.asp to download the required CSS file.
Example
w3css_colors.htm
<html>
<head>
<title>The W3.CSS Color Themes</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="css/w3-theme-red.css">
</head>
<body class="w3-container">
<h2>Color Theme Demo</h2>
<hr/>
<div class="w3-card-4">
<div class="w3-container w3-theme w3-card-2">
<h1>Red Colored Theme</h1>
</div>
<div class="w3-container w3-text-theme">
<h2>w3-text-theme - Theme for Text</h2>
</div>
<ul class="w3-ul w3-border-top">
<li class="w3-theme-l5" style="position:relative">
<a class="w3-btn-floating-large w3-theme-action w3-right"
style="position:absolute;top:-28px;right:16px;">+</a>
<p>Using w3-theme-l5 / w3-theme-light style</p>
</li>
<li class="w3-theme-l4"><p>Using w3-theme-l4 style</p></li>
<li class="w3-theme-l3"><p>Using w3-theme-l3 style</p></li>
<li class="w3-theme-l2"><p>Using w3-theme-l2 style</p></li>
<li class="w3-theme-l1"><p>Using w3-theme-l1 style</p></li>
<li class="w3-theme"><p>Using w3-theme style</p></li>
<li class="w3-theme-d1"><p>Using w3-theme style</p></li>
<li class="w3-theme-d2"><p>Using w3-theme style</p></li>
<li class="w3-theme-d3"><p>Using w3-theme style</p></li>
<li class="w3-theme-d4"><p>Using w3-theme style</p></li>
</ul>
</div>
</body>
</html>
Result
Verify the result.
No comments:
Post a Comment