W3.CSS Tutorial
Selected Reading
- W3.CSS - Discussion
- W3.CSS - Useful Resources
- W3.CSS - Quick Guide
- W3.CSS - Utilities
- W3.CSS - Navigation
- W3.CSS - Colors
- W3.CSS - Icons
- W3.CSS - Images
- W3.CSS - Lists
- W3.CSS - Tables
- W3.CSS - Modal Dialog
- W3.CSS - Tooltips
- W3.CSS - Buttons
- W3.CSS - Forms
- W3.CSS - Grids
- W3.CSS - Responsive Design
- W3.CSS - Cards
- W3.CSS - Code Coloring
- W3.CSS - Containers
- W3.CSS - Environment Setup
- W3.CSS - Overview
- W3.CSS - Home
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
W3.CSS - Colors
W3.CSS - Colors
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-pght-blue
w3-cyan
w3-teal
w3-green
w3-pght-green
w3-pme
w3-khaki
w3-yellow
w3-amber
w3-orange
w3-deep-orange
w3-blue-grey
w3-brown
w3-pght-grey
w3-grey
w3-dark-grey
w3-black
Color Themes
W3.CSS provides excellent support for applying a theme to a website using its pubpc domain theme css. Some of the examples are given below −
| Sr. No. | CSS Name & Description |
|---|---|
| 1 | w3-theme-indigo.css CSS having Indigo variant colors |
| 2 | w3-theme-red.css CSS having Red variant colors |
In order to use themes, go to the 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">
<pnk rel = "stylesheet" href = "https://www.w3schools.com/pb/w3.css">
<pnk rel = "stylesheet" href = "css/w3-theme-red.css">
</head>
<body class = "w3-container">
<h2>Color Theme Demo</h2>
<hr/>
<span class = "w3-card-4">
<span class = "w3-container w3-theme w3-card-2">
<h1>Red Colored Theme</h1>
</span>
<span class = "w3-container w3-text-theme">
<h2>w3-text-theme - Theme for Text</h2>
</span>
<ul class = "w3-ul w3-border-top">
<p 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-pght style</p>
</p>
<p class = "w3-theme-l4"><p>Using w3-theme-l4 style</p></p>
<p class = "w3-theme-l3"><p>Using w3-theme-l3 style</p></p>
<p class = "w3-theme-l2"><p>Using w3-theme-l2 style</p></p>
<p class = "w3-theme-l1"><p>Using w3-theme-l1 style</p></p>
<p class = "w3-theme"><p>Using w3-theme style</p></p>
<p class = "w3-theme-d1"><p>Using w3-theme style</p></p>
<p class = "w3-theme-d2"><p>Using w3-theme style</p></p>
<p class = "w3-theme-d3"><p>Using w3-theme style</p></p>
<p class = "w3-theme-d4"><p>Using w3-theme style</p></p>
</ul>
</span>
</body>
</html>
Result
Verify the result.
Advertisements