CSS Basics

Colors & BG

Box Model

Text Styles

CSS Layout

CSS Effects

Advanced

CSS Colors

❮ Previous Next ❯

CSS Colors: Styling Elements

CSS colors are used to change the look of text, backgrounds, borders, and other elements on a webpage. They help make a site more attractive and easy to read.

Color Formats in CSS

CSS provides various formats to define colors, giving you flexibility based on your needs.

Color Format Description Example
Color Names Use predefined color names for simplicity. red, blue, green
Hexadecimal (Hex) Define colors using six-digit hex codes. #FF5733
RGB Define colors using Red, Green, Blue values. rgb(255, 0, 0)
RGBA Extend RGB by adding an alpha (transparency) value. rgba(255, 0, 0, 0.5)
HSL Define colors using Hue, Saturation, Lightness values. hsl(120, 100%, 50%)
HSLA Extend HSL by adding an alpha value for transparency. hsla(120, 100%, 50%, 0.5)

You can try different formats of colors here:

CSS Color Formats Example:

<html>
<head>
    <style>
        .hex-example {
            background-color: #FF5733; /* Hexadecimal color */
        }
        .rgb-example {
            color: rgb(255, 0, 0); /* RGB color */
        }
        .rgba-example {
            color: rgba(0, 255, 0, 0.5); /* RGBA color with transparency */
        }
        .hsl-example {
            color: hsl(120, 100%, 50%); /* HSL color */
        }
        .hsla-example {
            color: hsla(120, 100%, 50%, 0.3); /* HSLA color with transparency */
        }
    </style>
</head>
<body>
    <div class="hex-example">This div has a Hexadecimal background color.</div>
    <div class="rgb-example">This text is in RGB red.</div>
    <div class="rgba-example">This text is in RGBA green with 50% transparency.</div>
    <div class="hsl-example">This text is in HSL green.</div>
    <div class="hsla-example">This text is in HSLA green with 30% opacity.</div>
</body>
</html>

In this example:

Use Cases of CSS Colors

CSS colors play a vital role in the design and functionality of a webpage. Below are common use cases of CSS colors along with simple code examples:

1. Background Colors

You can use background-color to set the color of an element’s background. It's typically used for sections, divs, headers, footers, etc.

Background Colors Example:

<html>
<head>
    <style>
        .bg-example {
            background-color: #FF5733; /* Red-Orange background */
            padding: 20px;
            color: white;
        }
    </style>
</head>
<body>
    <div class="bg-example">This div has a warm background color!</div>
</body>
</html>

2. Text Colors

The color property is used to apply color to the text. It's important to ensure good contrast between the text and the background for readability.

Text Colors Example:

<html>
<head>
    <style>
        .text-example {
            color: rgb(255, 0, 0); /* Red text */
            font-size: 20px;
        }
    </style>
</head>
<body>
    <p class="text-example">This text is in red.</p>
</body>
</html>

3. Border Colors

You can use the border property to apply color to an element's border. It's commonly used for buttons, cards, or form inputs to create visible outlines.

Border Colors Example:

<html>
<head>
    <style>
        .border-example {
            border: 5px solid rgba(0, 255, 0, 0.5); /* Semi-transparent green border */
            padding: 10px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="border-example">This div has a semi-transparent green border.</div>
</body>
</html>

4. Hover Effects

Use the :hover pseudo-class to change the color of an element when a user hovers over it, adding interactivity to your design.

Hover Effects Example:

<html>
<head>
    <style>
        .hover-example {
            background-color: #4CAF50; /* Green background */
            color: white;
            padding: 20px;
            text-align: center;
            cursor: pointer;
        }
        .hover-example:hover {
            background-color: #45a049; /* Darker green on hover */
        }
    </style>
</head>
<body>
    <div class="hover-example">Hover over me to change the background color!</div>
</body>
</html>

5. Shadows and Text Effects

You can use box-shadow to add shadows around elements or text-shadow for adding shadows to the text, creating depth and emphasis.

Shadows Example:

<html>
<head>
    <style>
        .shadow-example {
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); 
            color: #FF5733;
            font-size: 30px;
        }
        .box-shadow-example {
            box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.3);
            padding: 20px;
            background-color: #FFF;
        }
    </style>
</head>
<body>
    <p class="shadow-example">This text has a shadow effect.</p>
    <div class="box-shadow-example">This div has a box shadow.</div>
</body>
</html>

6. Gradients

CSS allows you to create gradients using the background property. Gradients can transition smoothly between two or more colors.

Gradients Example:

<html>
<head>
    <style>
        .gradient-example {
            background: linear-gradient(to right, #FF5733, #33FF57);
            padding: 40px;
            color: white;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="gradient-example">This div has a linear gradient background.</div>
</body>
</html>

Exercise

?

Which of the following color formats supports transparency in CSS?

❮ Previous Next ❯