Lesson 3Beginner 1 min read

CSS Colors and Backgrounds

CSS allows you to control the appearance of your website by adding colors and backgrounds. This helps make your website visually appealing and user-friendly.

CSS Colors

You can apply colors to text, backgrounds, borders, and more.

1. Named Colors

These are simple color names supported by browsers.

CSS

h1 {
  color: red;
}

2. HEX Colors

HEX values start with # and represent color combinations.

CSS

p {
  color: #3498db;
}

3. RGB Colors

RGB stands for Red, Green, Blue.

CSS

div {
  color: rgb(255, 0, 0); /* Red */
}

4. RGBA Colors (with transparency)

The “A” controls opacity (0 = transparent, 1 = solid).

CSS

div {
  color: rgba(0, 0, 255, 0.5); /* Semi-transparent blue */
}

Background Properties

CSS allows you to style backgrounds in different ways.

1. Background Color

CSS

body {
  background-color: lightgray;
}

2. Background Image

CSS

body {
  background-image: url("background.jpg");
}

3. Background Size

CSS

body {
  background-size: cover;
}

cover → fills the entire screen
contain → fits inside the container

4. Background Position

CSS

body {
  background-position: center;
}

5. Background Repeat

CSS

body {
  background-repeat: no-repeat;
}

6. Background Shorthand

You can combine multiple properties in one line:

CSS

body {
  background: #000 url("bg.jpg") no-repeat center/cover;
}

Complete Example

HTML

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background: #f4f4f4;
    }

    h1 {
      color: #2c3e50;
    }

    .box {
      background-color: rgba(52, 152, 219, 0.5);
      padding: 20px;
    }
  </style>
</head>
<body>

  <h1>Welcome to CSS</h1>
  <div class="box">
    This box has a colored background.
  </div>

</body>
</html>

Key takeaway

CSS colors can be applied using named colors, HEX, RGB, and RGBA, while background properties help you control images, positioning, and layout styling to improve the overall design of your website.