W3.CSS provides us with classes to set the color of font and container. Not only this, there are also classes to change or set the color of the font or container on hover the division or section. All the coloring elements can be broadly be classified into the following parts:
- Background Color
- Text Color
- Hover Background Color
- Hover Text Color
Background Color: The background color classes are as follows:
Sr. No |
Background Color Name |
Background Color Class |
---|---|---|
1. |
Red |
w3-red |
2. |
Pink |
w3-pink |
3. |
Purple |
w3-purple |
4. |
Dark Purple |
w3-dark-purple |
5. |
Indigo |
w3-indigo |
6. |
Blue |
w3-blue |
7. |
Light Blue |
w3-light-blue |
8. |
Cyan |
w3-cyan |
9. |
Aqua |
w3-aqua |
10. |
Teal |
w3-teal |
11. |
Green |
w3-green |
12. |
Light Green |
w3-light-green |
13. |
Lime |
w3-lime |
14. |
Sand |
w3-sand |
15. |
Khaki |
w3-khaki |
16. |
Yellow |
w3-yellow |
17. |
Amber |
w3-amber |
18. |
Orange |
w3-orange |
19. |
Deep Orange |
w3-deep-orange |
20. |
Blue Gray |
w3-blue-grey |
21. |
Brown |
w3-brown |
22. |
Light Gray |
w3-light-grey |
23. |
Gray |
w3-grey |
24. |
Dark Gray |
w3-dark-grey |
25. |
Pale Red |
w3-pale-red |
26. |
Pale Yellow |
w3-pale-yellow |
27. |
Pale Green |
w3-pale-green |
28. |
Pale Blue |
w3-pale-blue |
29. |
White |
w3-white |
30. |
Black |
w3-black |
Example: Adding background color on a division.
<!DOCTYPE html> < html >
< head >
<!-- Adding W3.CSS file through external link -->
< link rel = "stylesheet" href =
</ head >
< body >
<!-- w3-container is used to add 16px
padding to any HTML element. -->
<!-- w3-center is used to set the content
of the element to the center. -->
< div class = "w3-container w3-center" >
<!-- w3-text-green sets the text
color to green. -->
<!-- w3-xxlarge sets font size to 32px -->
< h2 class = "w3-text-green w3-xxlarge" >
Welcome To GFG
</ h2 >
</ div >
<!-- w3-orange sets the background
color orange -->
<!-- w3-panel is used to 16px padding
from all the direction -->
< div class = "w3-panel w3-orange" >
< p >
GeeksforGeeks is a Computer Science
portal for geeks. It contains well
written, well thought and well
explained computer science and
programming articles, quizzes etc.
</ p >
</ div >
</ body >
</ html >
|
Output:
Text Color: The font color classes are as follows:
Sr. No. |
Text Color Name |
Text Color Class |
---|---|---|
1. |
Amber |
w3-text-amber |
2. |
Aqua |
w3-text-aqua |
3. |
Blue |
w3-text-blue |
4. |
Light Blue |
w3-text-light-blue |
5. |
Brown |
w3-text-brown |
6. |
Cyan |
w3-text-cyan |
7. |
Blue Gray |
w3-text-blue-grey |
8. |
Green |
w3-text-green |
9. |
Light Green |
w3-text-light-green |
10. |
Indigo |
w3-text-indigo |
11. |
Khaki |
w3-text-khaki |
12. |
Lime |
w3-text-lime |
13. |
Orange |
w3-text-orange |
14. |
Deep Orange |
w3-text-deep-orange |
15. |
Pink |
w3-text-pink |
16. |
Purple |
w3-text-purple |
17. |
Deep Purple |
w3-text-deep-purple |
18. |
Red |
w3-text-red |
19. |
Sand |
w3-text-sand |
20. |
Teal |
w3-text-teal |
21. |
Yellow |
w3-text-yellow |
22. |
White |
w3-text-white |
23. |
Black |
w3-text-black |
24. |
Grey |
w3-text-grey |
25. |
Light Grey |
w3-text-light-grey |
26. |
Dark Grey |
w3-text-dark-grey |
Example: Adding font color to a division.
<!DOCTYPE html> < html >
< head >
<!-- Adding W3.CSS file through external link -->
< link rel = "stylesheet" href =
</ head >
< body >
<!-- w3-container is used to add 16px
padding to any HTML element. -->
<!-- w3-center is used to set the content
of the element to the center. -->
< div class = "w3-container w3-center" >
<!-- w3-text-green sets the text
color to green. -->
<!-- w3-xxlarge sets font size to 32px -->
< h2 class = "w3-text-green w3-xxlarge" >
Welcome To GFG
</ h2 >
</ div >
<!-- w3-text-orange sets the font
color to orange -->
<!-- w3-panel is used to 16px padding
from all the direction -->
< div class = "w3-panel w3-text-orange" >
< p >
GeeksforGeeks is a Computer Science
portal for geeks. It contains well
written, well thought and well
explained computer science and
programming articles, quizzes etc.
</ p >
</ div >
</ body >
</ html >
|
Output:
Hover Background Color: The hoverable background color classes are as follows:
Sr. No. |
Background Color Name |
Background Color Class |
---|---|---|
1. |
Amber |
w3-hover-amber |
2. |
Aqua |
w3-hover-aqua |
3. |
Blue |
w3-hover-blue |
4. |
Light Blue |
w3-hover-light-blue |
5. |
Brown |
w3-hover-brown |
6. |
Cyan |
w3-hover-cyan |
7. |
Blue Grey |
w3-hover-blue-grey |
8. |
Green |
w3-hover-green |
9. |
Light Green |
w3-hover-light-green |
10. |
Indigo |
w3-hover-indigo |
11. |
Khaki |
w3-hover-khaki |
12. |
Lime |
w3-hover-lime |
13. |
Orange |
w3-hover-orange |
14. |
Deep Orange |
w3-hover-deep-orange |
15. |
Pink |
w3-hover-pink |
16. |
Purple |
w3-hover-purple |
17. |
Deep Purple |
w3-hover-deep-purple |
18. |
Red |
w3-hover-red |
19. |
Sand |
w3-hover-sand |
20. |
Teal |
w3-hover-teal |
21. |
Yellow |
w3-hover-yellow |
22. |
White |
w3-hover-white |
23. |
Black |
w3-hover-black |
24. |
Grey |
w3-hover-grey |
25. |
Light Grey |
w3-hover-light-grey |
26. |
Dark Grey |
w3-hover-dark-grey |
27. |
Pale Red |
w3-hover-pale-red |
28. |
Pale Green |
w3-hover-pale-green |
29. |
Pale Yellow |
w3-hover-pale-yellow |
30. |
Pale Blue |
w3-hover-pale-blue |
Example: Adding hoverable background color on a division.
<!DOCTYPE html> < html >
< head >
<!-- Adding W3.CSS file through external link -->
< link rel = "stylesheet" href =
</ head >
< body >
<!-- w3-container is used to add 16px
padding to any HTML element. -->
<!-- w3-center is used to set the content
of the element to the center. -->
< div class = "w3-container w3-center" >
<!-- w3-text-green sets the text
color to green. -->
<!-- w3-xxlarge sets font size to 32px -->
< h2 class = "w3-text-green w3-xxlarge" >
Welcome To GFG
</ h2 >
</ div >
<!-- w3-hover-amber sets the background color
to amber on hover over the division -->
<!-- w3-panel is used to 16px padding from
all the direction -->
< div class="w3-panel w3-text-white
w3-pink w3-hover-amber">
< p >
GeeksforGeeks is a Computer Science
portal for geeks. It contains well
written, well thought and well
explained computer science and
programming articles, quizzes etc.
</ p >
</ div >
</ body >
</ html >
|
Output:
- Before Hover:
- On Hover:
Hover Text Color: The hoverable text color classes are as follows:
Sr. No. |
Text Color Name |
Text Color Class |
---|---|---|
1. |
Amber |
w3-hover-text-amber |
2. |
Aqua |
w3-hover-text-aqua |
3. |
Blue |
w3-hover-text-blue |
4. |
Light Blue |
w3-hover-text-light-blue |
5. |
Brown |
w3-hover-text-brown |
6. |
Cyan |
w3-hover-text-cyan |
7. |
Blue Grey |
w3-hover-text-blue-grey |
8. |
Green |
w3-hover-text-green |
9. |
Light Green |
w3-hover-text-light-green |
10. |
Indigo |
w3-hover-text-indigo |
11. |
Khaki |
w3-hover-text-khaki |
12. |
Lime |
w3-hover-text-lime |
13. |
Orange |
w3-hover-text-orange |
14. |
Deep Orange |
w3-hover-text-deep-orange |
15. |
Pink |
w3-hover-text-pink |
16. |
Purple |
w3-hover-text-purple |
17. |
Deep Purple |
w3-hover-text-deep-purple |
18. |
Red |
w3-hover-text-red |
19. |
Sand |
w3-hover-text-sand |
20. |
Teal |
w3-hover-text-teal |
21. |
Yellow |
w3-hover-text-yellow |
22. |
White |
w3-hover-text-white |
23. |
Black |
w3-hover-text-black |
24. |
Grey |
w3-hover-text-grey |
25. |
Light Grey |
w3-hover-text-light-grey |
26. |
Dark Grey |
w3-hover-text-dark-grey |
Example: Adding hoverable text color on a division.
<!DOCTYPE html> < html >
< head >
<!-- Adding W3.CSS file through external link -->
< link rel = "stylesheet" href =
</ head >
< body >
<!-- w3-container is used to add 16px
padding to any HTML element. -->
<!-- w3-center is used to set the
content of the element to the center. -->
< div class = "w3-container w3-center" >
<!-- w3-text-green sets the text
color to green. -->
<!-- w3-xxlarge sets font size to 32px -->
< h2 class = "w3-text-green w3-xxlarge" >
Welcome To GFG
</ h2 >
</ div >
<!-- w3-hover-text-amber sets the font color
to amber on hover over the division -->
<!-- w3-panel is used to 16px padding from
all the direction -->
< div class="w3-panel w3-text-pink
w3-hover-text-amber">
< p >
GeeksforGeeks is a Computer Science
portal for geeks. It contains well
written, well thought and well
explained computer science and
programming articles, quizzes etc.
</ p >
</ div >
</ body >
</ html >
|
Output:
- Before Hover:
- On Hover: