W3CSS Colors Basics

Color is one of the most important aspect of visual aesthetics of a website. Right color combination can make a site more appealing, attractive and usable for the visitor. W3CSS framework comes with a variety of colors that can be used to perform different tasks. This article contains information about W3CSS colors basics. There are four basic color tasks performed by W3CSS. Four different classes perform these tasks. They are as follows:

  • w3-color: Used to set background color of a any html element.
  • w3-text-color: Sets the color of the text of an element.
  • w3-hover-color: Sets the background color when mouse is hovered over an element.
  • w3-hover-text-color: Changes the color of the text when mouse is hovered over it.

w3-color

You can use w3-color class to set background color of any html element. Take a look at the following example to see how w3-color sets the background color of different elements.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

    <div class="w3-container w3-red">
        <p>This is with red background<p>
    </div>
    

<div class="w3-container w3-purple">
  <p>This is with purple background</p>
</div>

<div class="w3-container w3-light-grey">
  <p>This is with light grey background</p>
</div>
</body>

</html>

Download the code Try the code

You can see in the above code that it contains three divs. All the three divs have a class of w3-container which adds properties of a container to these classes. The first div has a class of w3-red, while the second div has a class of w3-purple and finally the third div has a class of w3-light-grey. These classes add corresponding background colors to the div. Therefore, if you open the above page in browser, you shall see first div with red background, stacked over a second div with purple background followed by a third div with light-grey background. You can use all the basic color names with w3-color class to set the background color of an html element

w3-text-color

The w3-text-color class is used to set the text color of an element. Simply replace the word color with the actual color which you want your text to use. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

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

<div class="w3-container w3-text-purple">
  <p>This is purple text</p>
</div>

<div class="w3-container w3-text-light-grey">
  <p>This is light grey text</p>
</div>
</body>

</html>

Download the code Try the code

In the next article, we shall study more about W3CSS colors basics.

Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .