4. Colors, Backgrounds & Borders

Level: BeginnerDuration: 20m

CSS Color Systems

CSS supports multiple ways to define colors. You can use named colors, HEX codes, RGB/RGBA, or HSL/HSLA values. RGBA and HSLA allow transparency control via the alpha channel.

css

/* Named color */
p { color: red; }

/* HEX code */
div { background-color: #3498db; }

/* RGB */
section { color: rgb(52, 152, 219); }

/* RGBA with transparency */
header { background-color: rgba(52, 152, 219, 0.5); }

/* HSL */
footer { color: hsl(204, 70%, 53%); }

/* HSLA with transparency */
nav { background-color: hsla(204, 70%, 53%, 0.3); }

Backgrounds

CSS allows you to style element backgrounds with colors, images, multiple layers, and gradients.

css

/* Simple background color */
div { background-color: #f1c40f; }

/* Background image */
section {
  background-image: url('image.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* Multiple backgrounds */
header {
  background-image: url('pattern.png'), linear-gradient(to right, #ff7e5f, #feb47b);
  background-repeat: repeat, no-repeat;
  background-position: top left, center;
  background-size: auto, cover;
}

/* Gradients */
button {
  background: linear-gradient(to right, #6a11cb, #2575fc);
}

.card {
  background: radial-gradient(circle, #ff9a9e, #fad0c4);
}

Borders & Shadows

Borders and shadows add structure and depth to elements. You can customize color, thickness, style, radius, and shadow effects.

css

/* Basic border */
div { border: 2px solid #2c3e50; }

/* Rounded corners */
button { border-radius: 10px; }

/* Outline */
input:focus { outline: 2px solid #e67e22; }

/* Box shadow */
.card {
  box-shadow: 4px 4px 10px rgba(0,0,0,0.3);
}

/* Text shadow */
h1 {
  text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}

Mini Project Step

Design a set of product cards for an online store. Each card should have a background color or gradient, a border with rounded corners, and a subtle box-shadow. Add product titles with a text-shadow effect, and experiment with color combinations using HEX, RGB, and HSL values. Make the cards visually appealing while maintaining readability.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Color & Border Project</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      display: flex;
      gap: 20px;
      padding: 20px;
      background-color: #f5f5f5;
    }
    .card {
      background: linear-gradient(to bottom, #ff9a9e, #fad0c4);
      border: 2px solid #e74c3c;
      border-radius: 12px;
      box-shadow: 4px 4px 15px rgba(0,0,0,0.2);
      padding: 20px;
      width: 200px;
      text-align: center;
    }
    .card h2 {
      text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
      color: #2c3e50;
    }
    .card p {
      color: #34495e;
      line-height: 1.4;
    }
  </style>
</head>
<body>
  <div class="card">
    <h2>Product One</h2>
    <p>High-quality and stylish product with amazing features.</p>
  </div>
  <div class="card">
    <h2>Product Two</h2>
    <p>Elegant design and superior performance for everyday use.</p>
  </div>
  <div class="card">
    <h2>Product Three</h2>
    <p>Durable, colorful, and perfect for gifting.</p>
  </div>
</body>
</html>

MDN CSS Colors & Backgrounds Guide

Page

CSS Color Systems

Backgrounds

Borders & Shadows

Mini Project Step