Setting Text Color Working with CSS

CSS Web Development Front End Technology

The CSS color property is used to set text color for an element.

Syntax

The syntax of CSS color property is as follows −

Selector {
   color: /*value*/
}

Example

The following examples illustrate CSS color property −

Live Demo

<!DOCTYPE html>
<html lang="en">
<head>
<style>
div {
   height: 100px;
   width: 200px;
   margin: 10px;
   display: flex;
   float: left;
   font-size: 1.4em;
   word-spacing: 30px;
   line-height: 4.5em;
   border: thin solid blue;
   border-radius: 40%;
   text-align: center;
   color: rebeccapurple;
}
div + div{
   background-color: beige;
   color: red;
   text-align: justify;
   text-decoration: line-through;
}
</style>
</head>
<body>
<div>One Two</div>
<div>Three </div>
</body>
</html>

Output

This gives the following output −

Example

Live Demo

<!DOCTYPE html>
<html lang="en">
<head>
<style>
p {
   margin: 10px;
   display: flex;
   float: left;
   border: 3px groove green;
   text-align: center;
   color: rebeccapurple;
}
span{
   background-color: beige;
   color: red;
   text-decoration: underline;
}
</style>
</head>
<body>
<h2>What is Tableau?</h2>
<p>Tableau is a Business Intelligence tool for visually analyzing the data. 
<span>Users can create and distribute an interactive and shareable dashboard, 
which depict the trends, variations, and density of the data in the form of 
graphs and charts. </span> 
Tableau can connect to files, relational and Big Data sources to acquire and process data.</p>
</body>
</html>