W3-Color-Classes

In W3.CSS, colors are applied using simple predefined classes.
They make it easy to set background colors, text colors, and hover effects without writing custom CSS.

There are 4 main color-related class types in W3.CSS:

1. w3-color – Background Color

Used to apply a background color to an element.

Syntax:

<div class="w3-blue">This is a Blue Background</div>

---

2. w3-hover-color – Background Color on Hover

Used to change the background color when the user hovers the mouse over an element.

Syntax:

 

<div class="w3-hover-green w3-padding">Hover me to turn Green</div> 

Example:

<button class="w3-button w3-red w3-hover-blue"> Hover to change Red → Blue </button>

 Note: You can use this class on buttons, divs, cards, menus, etc., to make interactive UIs.

---

3. w3-text-color – Text Color

Used to apply color only to text (not the background).

Syntax:

<p class="w3-text-red">This is red colored text</p>

---

4. w3-hover-text-color – Text Color on Hover

Used to change the text color when hovered.

Syntax:

<p class="w3-text-black w3-hover-text-red"> Hover over me to see red text </p>