How can you set a color property on style.css | html code

CSS color property:

The CSS properties color of the background and foreground color of the website that we can determine. Various components such as document – text, backgrounds, borders, and can add color in different parts of the elements. Color can be embedded in the application properties of a variety of color options. For example:

  • Color Keywords [Keywords are case-sensitive]
  • Hexadecimal Numbers
  • RGB (red, green, blue)
  • HSL(hue, saturation, lightness)
  • RGBA(red, green, blue, alpha)
  • HLSA(hue, saturation, lightness, alpha)

CSS Basic Color management:

CSS color values :

Syntax:

Element{color: <color>;>}
.example1 {color:red;}
.example2{color:#ff0000;}
.example3{color:#f00,}
.example4{color:rgb(255,0,0);}
.example5{color:rgb(100%, 0%, 0%)}

Using color to add style attributes:

<p style="color:#FFA500;">...........</p>
body{color:red;}

Example: Basic color CSS.

<!doctype html>
<html>
<style>
div {width: 500px; height: 100px; background-color:teal;}
p{font-family:verdana; font-size:2em; color:silver;}
</style>
<body>
<div>
<p>The lack of money is the root of all evil.</p>
</div>
</body>
</html>

Display in Browser:

css basic color

Using CSS hexadecimal notation Color:

It is the most common popular way of applying color to RGB (red, blue, green) values.

Example:

<!doctype html>
<html>
<style>
div {width: 500px; height: 100px; background-color:#fa4b2a;}
p{font-family:verdana; font-size:2em; color:#ccc;}
</style>
<body>
<div>
<p>The lack of money is the root of all evil.</p>
</div>
</body>
</html>

Display in Browser:

use hex code

RGBa using the CSS color values:

The color of the RGBA (red, blue, green, alpha), directed by values ​​to the function rgba () may use. Here’s a means RGBa alpha, the color values ​​of the transparency indicates. You can also only function rgb () can be used to the indicate alpha value boycotted RGB values.

RGB () values :

rgb(redvalue, bluevalue, greenvalue)
rgb(0,0,0) rgb set in decimal values
rgb(0%, 0%, 0%) rgb set in percentage values
h1{color:rgb(0,255,0);} represents Lime color

Example:

<!doctype html>
<html>
<style>
div {width: 600px; height: 200px; 
background-color:rgba(223,242,43,0.8);}
p{font-family:verdana; font-size:2em; color:rgba(255,128,64,0,0.7);}
</style>
<body>
<div>
<p>The lack of money is the root of all evil.</p>
</div>
</body>
</html>

Display in Browser:

use rgba value color

CSS colors: HSLA (hue, saturation, lightness, alpha)

The HSLA hsla () function is another way of using color. RGB values ​​HSL cylindrical coordinate system used to indicate the combination of all colors are available in the form of the main axis of the cylinder.

hue: axis to indicate the angle of the surrounding HUE (h) to use. Up to the value of 0-360.

Saturation: Defines the distance from the axis to the intensity of the color indicates the saturation. Up to the value of 0-100.

Luminance: The luminance of the distance along the axis refers Light levels. Up to the value of 0-100.

Alpha: is indicated by the color and clarity. The value of 0 to 1.

Example:

<!doctype html>
<html>
<style>
div {width: 600px; height: 200px; 
background-color:hsla(223,42%,43%,0.8);}
p{font-family:verdana; font-size:2em; color:hsla(235,68%,94%,0.7);}
</style>
<body>
<div>
<p>The lack of money is the root of all evil.</p>
</div>
</body>
</html>

Display in Browser:

css color HSLA

Using a variety of color:

We paragraphs, headings, and divisions (volumes separated) for a variety of background colors can create. Using the example codes is given below.

Example:

<!doctype html>
<html>
<head>
<style type="text/css">
h1{background-color:green;}
body{font-family:verdana; background-color:yellow;}
p {background-color:white;}
</style>
</head>
<body>
<h1>Example of &1t; style&gt; tag.</h1>
For dynamic web site css is important. For dynamic web site css is important.

<p>For dynamic web site css is important. For dynamic web site css is important.</p>
</body>
</html>

Display in Browser:

difference uses of color

Use of  text background color:

Example:

<!doctype html>
<html>
<head>
<style type="text/css">
div {background-color:#85b9e9; color: #000000;}
.example1 {background-color: #ffd78c; color:#c04000;}
.example2 {background-color: #bde9ba; color:#008000;}
</style>
</head>
<body>
<div>The light blue background</div>
<p>The inline background,<span class="example1"> This is the orange</span>, <span class="example2">This is the green</span>.</p>
</body>
</html>

Display in Browser:

 background text color

Leave a Reply

Your email address will not be published. Required fields are marked *