Colors and Backgrounds in CSS

Lecture 3: Colors and Backgrounds in CSS

In this lecture, we'll explore how to use colors and backgrounds to make your website visually appealing. Understanding how to apply colors and backgrounds effectively is key to creating engaging and aesthetically pleasing web designs.

Using Colors in CSS

CSS allows you to specify colors in several ways, including using color names, hexadecimal values, RGB, RGBA, HSL, and HSLA.

1. Color Names

CSS provides a wide range of predefined color names.

• Example:

h1 {
    color: red;
  }        

This will set the text color of all <h1> elements to red.

2. Hexadecimal Colors

Hex codes are a six-digit combination of numbers and letters defined by their mix of red, green, and blue (RGB) values.

• Example

p {
    color: #3498db;   /* A shade of blue */
  }        

3. RGB and RGBA

RGB stands for Red, Green, and Blue. RGBA adds an Alpha channel for opacity.

• Example (RGB)

 div {
    color: rgb(255, 99, 71);    /* Tomato color */
  }        

• Example (RGBA):

div {
    background-color: rgba(255, 99, 71, 0.5);     /* Semi-transparent tomato color */
  }        

4. HSL and HSLA

HSL stands for Hue, Saturation, and Lightness. HSLA includes an Alpha channel.

h2 {
    color: hsl(120, 100%, 50%); /* Pure green */
  }        

• Example (HSLA):

h2 {
    color: hsla(120, 100%, 50%, 0.5); /* Semi-transparent green */
  }        

Applying Backgrounds

Backgrounds in CSS can enhance the design by adding color, images, gradients, and more to elements.

1. Background Color

You can set the background color of any HTML element using the background-color property.

• Example:

body {
    background-color: #f4f4f4; /* Light gray background */
  }        

2. Background Images

CSS allows you to use images as backgrounds.

• Example:

 .banner {
    background-image: url('banner.jpg');
    background-size: cover;
    background-position: center;
  }        

This will set a background image on an element with the class banner. The image will cover the entire area and be centered.

3. Background Repeat

Control whether a background image repeats horizontally, vertically, or not at all.

• Example:

  .tile {
    background-image: url('tile.png');
    background-repeat: repeat; /* Repeats both horizontally and vertically */
  }        

4. Background Position

You can control the starting position of the background image.

• Example

 .header {
    background-image: url('header.jpg');
    background-position: top right;
  }        

5. Background Gradient

Gradients allow you to create smooth transitions between two or more colors.

• Example (Linear Gradient):

 .gradient-box {
    background: linear-gradient(to right, #ff7e5f, #feb47b);    /* Gradient from left to right */
  }        

Example (Radial Gradient)

 .circle-gradient {
    background: radial-gradient(circle, #ff7e5f, #feb47b);   /* Circular gradient */
  }        

Practical Example:

Let’s put these concepts into practice with an example that uses colors, a background image, and a gradient.

HTML:

<div class="content">
  <h1>Welcome to My Website</h1>
  <p>This is a simple example of using colors and backgrounds in CSS.</p>
</div>        

CSS:

/* Background color */
body {
  background-color: #f4f4f4;
}

/* Text color */
h1 {
  color: #2c3e50;
}

/* Background image with gradient overlay */
.content {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('background.jpg');
  background-size: cover;
  color: white;
  padding: 20px;
  text-align: center;
}

/* Text color for paragraph */
p {
  color: #ecf0f1;
}        

In this example:

• The body has a light gray background color.
• The <h1> text is dark blue.
• The .content div has a background image with a dark gradient overlay, making the white text stand out.
• The <p> text is a light shade to complement the background.

Practice Exercise

1. Create a webpage that includes headings, paragraphs, and divs.
2. Experiment with different color formats (hex, RGB, HSL) to style text and backgrounds.
3. Apply a background image to a section and play with its position, size, and repeat properties.
4. Create a section with a linear or radial gradient background.