Introduction
This chapter demonstrates about the W3.CSS Colors Which are used to colored the elements for the better look which colors are developed by considering colors used in marketing and road signs following are the concepts covered in this chapter.
- Text Color
- Background Color
- Colored Tables
- Hover Colors
- Color Themes
Description
User can also set the text color by using the w3-text-color which are more effective user can apply any color to the text in different formats which is shown in the below image.
The code below demonstrates to adding the colors to the text as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="w3.css">
<body>
<div class="w3-container">
<div class="w3-text-blue">
<h1>SPLESSONS</h1>
<p>Simple Programming Lessons Tutorials.
</div>
<div class="w3-text-yellow">
<h1>SPLESSONS</h1>
<p>Simple Programming Lessons Tutorials.</p>
</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
User can also give the background colors to the text by using the w3-color which are used to give the background colors fo the websites which are shown in the below example as shown.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="w3.css">
<body>
<div class="w3-container w3-aqua">
<h1>SPLESSONS</h1>
<p>SPLessons stands for Simple Programming Lessons and was started with a motive to present programming codes and to help the developers all around the globe with different queries in different Programming Languages.</p>
</div>
<div class="w3-container w3-lime">
<h1>SPLESSONS</h1>
<p>SPLessons stands for Simple Programming Lessons and was started with a motive to present programming codes and to help the developers all around the globe with different queries in different Programming Languages.</p>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
User can also give the coloring to the tables for each individual row.user can define his own colors to the table based on the requirement The code below demonstrates the giving different colors to the table as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="w3.css">
<body>
<div class="w3-container">
<table class="w3-table w3-bordered w3-dark-grey">
<tbody>
<tr class="w3-black">
<th>JAVA TECHNOLOGIES</th>
<th>WEB DEVELOPMENT</th>
</tr>
<tr>
<td>Core Java</td>
<td>HTML</td>
</tr>
<tr>
<td>Spring</td>
<td>HTML5</td>
</tr>
<tr>
<td>Servlets</td>
<td>SVG</td>
</tr>
<tr>
<td>Junit</td>
<td>CSS</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
User can give hoverable background colors to the text and buttons by using the w3-hover-color and w3-hover-text-color which gives the use of all colors above as hoverable background and text colors the code below demonstrates the Hover colors as shown.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="w3.css">
<body>
<p>
<button class="w3-btn w3-large w3-hover-black">Black</button>
<button class="w3-btn w3-large w3-hover-yellow">Yellow</button>
<button class="w3-btn w3-large w3-hover-blue">Blue</button>
<button class="w3-btn w3-large w3-hover-red">Red</button>
<button class="w3-btn w3-large w3-hover-white">White</button>
</p>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
By using the W3.CSS user can apply excellent color themes to the websites by using the public domain theme CSS in which it gives the varient colors like red varient colors andd blue varient colors etc themes with examples are brefly explained below.
The code below demonstrates the Aqua theme as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="/lib/w3-theme-aqua.css">
<body>
<div class="w3-card-4">
<div class="w3-container w3-theme w3-card-2">
<h1>Aqua</h1>
</div>
<div class="w3-container w3-text-theme">
<h2>w3-text-theme</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>w3-theme-l5 (w3-theme-light)</p>
</li>
<li class="w3-theme-l4">
<p>w3-theme-l4</p>
</li>
<li class="w3-theme-l3">
<p>w3-theme-l3</p>
</li>
<li class="w3-theme-l2">
<p>w3-theme-l2</p>
</li>
<li class="w3-theme-l1">
<p>w3-theme-l1</p>
</li>
<li class="w3-theme">
<p>w3-theme</p>
</li>
<li class="w3-theme-d1">
<p>w3-theme-d1</p>
</li>
<li class="w3-theme-d2">
<p>w3-theme-d2</p>
</li>
<li class="w3-theme-d3">
<p>w3-theme-d3</p>
</li>
<li class="w3-theme-d4">
<p>w3-theme-d4</p>
</li>
<li class="w3-theme-d5">
<p>w3-theme-d5 (w3-theme-dark)</p>
</li>
</ul>
</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
The code below demonstrates the red theme as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="/lib/w3-theme-aqua.css">
<body>
<div class="w3-card-4">
<div class="w3-container w3-theme w3-card-2">
<h1>Red</h1>
</div>
<div class="w3-container w3-text-theme">
<h2>w3-text-theme</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>w3-theme-l5 (w3-theme-light)</p>
</li>
<li class="w3-theme-l4">
<p>w3-theme-l4</p>
</li>
<li class="w3-theme-l3">
<p>w3-theme-l3</p>
</li>
<li class="w3-theme-l2">
<p>w3-theme-l2</p>
</li>
<li class="w3-theme-l1">
<p>w3-theme-l1</p>
</li>
<li class="w3-theme">
<p>w3-theme</p>
</li>
<li class="w3-theme-d1">
<p>w3-theme-d1</p>
</li>
<li class="w3-theme-d2">
<p>w3-theme-d2</p>
</li>
<li class="w3-theme-d3">
<p>w3-theme-d3</p>
</li>
<li class="w3-theme-d4">
<p>w3-theme-d4</p>
</li>
<li class="w3-theme-d5">
<p>w3-theme-d5 (w3-theme-dark)</p>
</li>
</ul>
</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Key Points
- By using W3.CSS user can give coloring to the text and background.
- W3.CSS also creates Hover Effects.User can apply themes to the
- A user can apply themes to the websites.