Designing anything without using appropriate color is quite a dull task. Since CSS is meant explicitly for designing web pages using cascading stylesheets, it is essential to implement the various colors to make your page look vibrant and attractive. In this chapter, you will learn about the color features provided by CSS.



Color Property in CSS

In CSS, you can define colors using particular and predefined color names, or you can make use of the RGB, HEX, HSL, RGBA, HSLA color values whose meaning is already known to the browser. These color values are used with different HTML elements to set the foreground, i.e., the text color or any particular element's background color. The color feature of CSS is also used for specifying colors to your borders and other decorative effects.

Some of the common practices and ways of representing colors are:

Color Format Syntax Sample CSS
Short Hex Code #RGB p{color: #F0F;}
Hex Code #RRGGBB p{color: #FFFF00;}
RGB % rgb(rrr%,ggg%,bbb%) p{color: rgb(75%,0%,50%);}
keyword red, yellow, etc. p{color: aqua;}
RGB Absolute rgb(rrr,ggg,bbb) p{color:rgb(255,255,0);}

Here is an example to show how you can use the style attribute with your HTML element to make the color effect happen within your code.

Example:

<!DOCTYPE html>
<html>

    <body bgcolor="#F3F3F3">
        <p style="background-color: tomato; color: #FFF"> Tomato Red </p>
        <p style="background-color:orange;"> Orange Fruit </p>
        <p style="background-color: violet;"> Aubergines or Brinjal </p>
        <p style="background-color:lightgray; border: 1px solid #333"> Pale Gray </p>
        <p style="background-color:dodgerblue;"> Dodger Blue </p>
        <p style="background-color: mediumseagreen;"> Color of Sea </p>
        <p style="background-color: gray;"> Gray Ash </p>
    </body>

</html>

Background Color in CSS

It is also possible to put in any background color to your HTML element using the style attribute and color code as the value of that attribute. Here is an HTML code that shows the use of background-color values in different elements.

Example:

<!DOCTYPE html>
<html>

    <body bgcolor="#F3F3F3">
        <h3 style="background-color:steelblue">Welcome to the world of CSS colors.</h3>
        <p style="background-color:orange">Orange Fruit</p>
    </body>

</html>

It is to be noted that, in case you write a wrong color code for your background color, it will automatically change itself to white, which is its default color.

Text Color in CSS

It is also possible to set the color of your text for different HTML elements by using the style attribute followed by the "color: value" of CSS. Here is an HTML code that shows how to implement the same:

Example:

<!DOCTYPE html>
<html>

    <body bgcolor="#F3F3F3">
        <p style="color:darkblue">Welcome to the world of CSS colors.</p>
        <p style="color:red">In CSS, you can define colors using particular and predefined color names or you can make use of the RGB, HEX, HSL, RGBA, HSLA color values.</p>
    </body>

</html>

It is to be noted that, in case you write a wrong color code for your text color, it will automatically change itself to black, which is its default color.

Border Color in CSS

The border colors can be set using the style attribute followed by border: value; Here is an example showing the implementation:

Example:

<!DOCTYPE html>
<html>

    <body bgcolor="#FFF">
        <p style="border:1px solid dodgerblue; padding:5px">Welcome to the world of CSS colors.</p>
    </body>

</html>

Transparency With Change in Values

You can bring transparency or increase or decrease the intensity of colors by tweaking the color's values. Here is an example showing the implementation:

Example:

<!DOCTYPE html>
<html>

    <body bgcolor="#F3F3F3">
        <h4> Different variations of "Tomato" colors without transparency:</h4>
        <p style="background-color:rgb(255, 99, 69);"> rgb(255, 99, 69) </p>
        <p style="background-color:#ff6346;"> #ff6346 </p>
        <p style="background-color:hsl(8, 100%, 60%);">hsl(8, 100%, 60%) </p>
        <h4> Tomato Color with 50% transparency:</h4>
        <p style="background-color:rgba(255, 99, 69, 0.4);"> rgba(255, 99, 69, 0.4) </p>
        <p style="background-color:hsla(8, 100%, 60%, 0.6);"> hsla(8, 100%, 60%, 0.6) </p>
    </body>

</html>


Found This Page Useful? Share It!
Get the Latest Tutorials and Updates
Join us on Telegram