1. Color Properties

Color properties in CSS allow you to define the color of text, borders, and other elements. You can use various formats to specify colors.

1.1 Color Names

CSS supports a range of named colors. For example, red, blue, and green are common color names.

Code Example: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Color Names Example</title>
    <style>
        .color-name-example {
            color: green;
            background-color: lightyellow;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="color-name-example">This text is green.</div>
</body>
</html>

1.2 HEX, RGB, RGBA, HSL, HSLA

CSS provides several methods for specifying colors:

  • HEX: A hexadecimal color code. For example, #FF5733.
  • RGB: A color defined by its red, green, and blue components. For example, rgb(255, 87, 51).
  • RGBA: Similar to RGB but includes an alpha channel for opacity. For example, rgba(255, 87, 51, 0.5).
  • HSL: A color defined by hue, saturation, and lightness. For example, hsl(12, 100%, 60%).
  • HSLA: Similar to HSL but includes an alpha channel for opacity. For example, hsla(12, 100%, 60%, 0.5).

Code Example: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Color Formats Example</title>
    <style>
        .color-formats {
            color: #FF5733; /* HEX */
            background-color: rgb(255, 87, 51); /* RGB */
            border: 2px solid rgba(255, 87, 51, 0.5); /* RGBA */
            padding: 10px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="color-formats">
        This text demonstrates HEX, RGB, and RGBA color formats.
    </div>
</body>
</html>

2. Background Properties

Background properties control the appearance of an element’s background, including color, images, and positioning.

2.1 Background Color

The background-color property sets the background color of an element.

Code Example: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Background Color Example</title>
    <style>
        .background-color-example {
            background-color: lightblue;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="background-color-example">This element has a light blue background color.</div>
</body>
</html>

2.2 Background Image

The background-image property sets an image as the background of an element.

Code Example: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Background Image Example</title>
    <style>
        .background-image-example {
            background-image: url('background.jpg');
            background-size: cover;
            padding: 20px;
            color: white;
        }
    </style>
</head>
<body>
    <div class="background-image-example">
        This element has a background image.
    </div>
</body>
</html>

2.3 Background Repeat

The background-repeat property controls whether and how a background image repeats. Options include repeat, repeat-x, repeat-y, and no-repeat.

Code Example: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Background Repeat Example</title>
    <style>
        .background-repeat-example {
            background-image: url('tile.png');
            background-repeat: repeat-x; /* Repeat horizontally only */
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="background-repeat-example">
        This element has a horizontally repeating background image.
    </div>
</body>
</html>

2.4 Background Position

The background-position property sets the starting position of a background image. It can be specified using keywords (top, right, bottom, left, center) or specific coordinates.

Code Example: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Background Position Example</title>
    <style>
        .background-position-example {
            background-image: url('background.jpg');
            background-position: center; /* Center the image */
            padding: 20px;
            color: white;
        }
    </style>
</head>
<body>
    <div class="background-position-example">
        This element has a background image centered.
    </div>
</body>
</html>

2.5 Background Size

The background-size property defines the size of the background image. Values can be auto, cover, or contain, or specific dimensions.

Code Example: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Background Size Example</title>
    <style>
        .background-size-example {
            background-image: url('background.jpg');
            background-size: cover; /* Cover the entire container */
            padding: 20px;
            color: white;
        }
    </style>
</head>
<body>
    <div class="background-size-example">
        This element has a background image that covers the entire container.
    </div>
</body>
</html>