CSS Colors
Applying Colors
Property to be used to apply color for the text: color
Property to be used to apply color for the background: background-color
Colors can be specified by using predefined color name
RGB Values
HexaDecimal Code
HSL Values
Some of the predefined color names:
Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray
etc
These names can be set as values of background-color property inside style element as inline CSS.
<!DOCTYPE html>
<html>
<body>
<h1 style=”background-color:DodgerBlue;”>Best Computer Institute</h1>
<p style=”background-color:Tomato;”>
To make your document look professionally produced, Word provides header, footer, cover page, and text box designs that complement each other. For example, you can add a matching cover page, header, and sidebar. Click Insert and then choose the elements you want from the different galleries.
</p>
</body>
</html>
The same color names can be applied as text color using color property.
<!DOCTYPE html>
<html>
<body>
<h3 style=”color:Tomato;”>Hello World</h3>
<p style=”color:DodgerBlue;”> To make your document look professionally produced, Word provides header, footer, cover page, and text box designs that complement each other. For example, you can add a matching cover page, header, and sidebar. Click Insert and then choose the elements you want from the different galleries.
</p>
<p style=”color:MediumSeaGreen;”> To make your document look professionally produced, Word provides header, footer, cover page, and text box designs that complement each other. For example, you can add a matching cover page, header, and sidebar. Click Insert and then choose the elements you want from the different galleries.
</p>
</body>
</html>
You can also set the same color names as border names for paragraphs.
<!DOCTYPE html>
<html>
<body>
<h1 style=”border: 2px solid Tomato;”>Best Computer Institute</h1>
<h1 style=”border: 2px solid DodgerBlue;”> Best Computer Institute </h1>
<h1 style=”border: 2px solid Violet;”> Best Computer Institute </h1>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<p>Same as color name “Tomato”:</p>
<h1 style=”background-color:rgb(255, 99, 71);”>rgb(255, 99, 71)</h1>
<h1 style=”background-color:#ff6347;”>#ff6347</h1>
<h1 style=”background-color:hsl(9, 100%, 64%);”>hsl(9, 100%, 64%)</h1>
<p>Same as color name “Tomato”, but 50% transparent:</p>
<h1 style=”background-color:rgba(255, 99, 71, 0.5);”>rgba(255, 99, 71, 0.5)</h1>
<h1 style=”background-color:hsla(9, 100%, 64%, 0.5);”>hsla(9, 100%, 64%, 0.5)</h1>
<p>In addition to the predefined color names, colors can be specified using RGB, HEX, HSL, or even transparent colors using RGBA or HSLA color values.</p>
</body>
</html>