CSS Text Colors

Color property என்பது நாம் கொடுக்க கூடிய text-ன் color-ஐ நம் விருபதிருக்கு ஏற்றவாறு மாற்றி கொள்ளவதற்காக மட்டுமே பயன்படுத்தபடுகிறது.

Example

Try this code 
.p1{
    color:#9E1030;
}
.p2{
    color:#00539C;
}
.p3{
    color:#616247;
}

Example

Try this code 
<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <p class="p1"> It always seems impossible until it's done.</p>
    <p class="p2"> Your talent is God's gift to you. What you do with it is your gift back to God.</p>
    <p class="p3"> I don't believe in age I believe in energy. Don't let age dictate, what you can and cannot do.</p>
</body>
</html>

Output:

It always seems impossible until it's done.

Your talent is God's gift to you. What you do with it is your gift back to God.

If you can dream it, you can do it.

CSS background colors

background-color property என்பது நாம் கொடுக்க கூடிய html tag-ன் background color-ஐ மாற்றி கொள்ளவதற்காக பயன்படுத்தபடுகிறது.

Note: color, background-color இரண்டும் வெவ்வேறு என்பதை நினைவு படுத்தி கொள்ளுங்கள். ஆனால் இரண்டிருக்கும் கொடுக்ககூடிய value மட்டும் ஒரே மாதிரியாக தான் இருக்கும்.

color-ஆனது கீழே கொடுக்கப்பட்டுள்ள முறைகளில் apply செய்யபடுகிறது.

  1. color names
  2. RGB values
  3. HEX values
  4. HSL values
  5. HSLA values

Color names

color-இன் name-ஐ கொண்டு background-color apply செய்யலாம்.

Example

Try this code 
.cnames div{
    margin:10px;
    text-align:center;
    height:30px;
    padding:10px;
}
.b1{
    background-color:red;
}
.b2{
    background-color:purple;
}
.b3{
    background-color:blue;
}

Example

Try this code 
<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <div class = "cnames">
        <div class="b1">Red</div>
        <div class="b2">Purple</div>
        <div class="b3">Blue</div>
    </div>
</body>
</html>

Output:

Red
Purple
Blue

RGB Values

rgb(red, green, blue) இந்த formula -ஐ கொண்டுதான் RGB values apply செய்யபடுகிறது.

HEX values

#rrggbb இந்த formula-ஐ கொண்டுதான் HEX values apply செய்யபடுகிறது.

HSL values

hsl(hue, saturation, lightness) இந்த formula-ஐ கொண்டுதான் RGB values apply செய்யபடுகிறது.

Hue என்பது 0 லிருது 360 வரை உள்ள degree value ஆகும். அதாவது 0 is red, 120 is green, and 240 is blue.

Saturation என்பது percentage value, 0% means a shade of gray, and 100% is the full color.

Lightness என்பது a percentage, 0% is black, 50% is neither light or dark, 100% is white.

Example

Try this code 
.cnames div{
    margin:10px;
    text-align:center;
    height:30px;
    padding:10px;
}
.rg1{
    background-color:rgb(0, 165, 94);
}
.rg2{
    background-color:#fa6347;
}
.rg3{
    background-color:hsl(9, 100%, 64%);
}

Example

Try this code 
<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <div class = "cnames">
        <div class="rg1">rgb(0, 165, 94);</div>
        <div class="rg2">#fa6347</div>
        <div class="rg3">hsl(9, 100%, 64%)</div>
    </div>
</body>
</html>

Output:

rgb(0, 165, 94);
#fa6347
hsl(9, 100%, 64%)

RGBA values

RGBA color values என்பது rgba(red, green, blue, alpha) என்ற formula-ல் opacity-ஐ சேர்த்து color apply செய்யபடுகிறது.

HSLA values

HSLA color values என்பது rgba hsla(hue, saturation, lightness, alpha) என்ற formula-ல் opacity-ஐ சேர்த்து color apply செய்யபடுகிறது.

Example

Try this code 
.cnames div{
    margin:10px;
    text-align:center;
    height:30px;
    padding:10px;
}
.hs1{
    background-color:rgba(0, 165, 94,0.3);
}
.hs2{
    background-color:hsla(9, 100%, 64%,0.8);
}

Example

Try this code 
<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <div class = "cnames">
        <div class="hs1">rgb(0, 165, 94, 0.3)</div>
        <div class="hs2">hsl(9, 100%, 64%, 0.8)</div>
    </div>
</body>
</html>

Output:

rgb(0, 165, 94,0.3)
hsl(9, 100%, 64%,0.8)

Comments