🎨 Day 12: CSS Colors, Backgrounds & Gradients

on

🎨 Day 12 — Colors, Backgrounds & Gradients in CSS

Welcome back to Day 12! 🌈 Today’s session is all about bringing your web pages to life with colors and backgrounds. While HTML structures the content, CSS makes it visually appealing. A great color scheme can enhance mood, readability, and design flow. By the end of this lesson, you’ll be able to apply solid colors, images, patterns, and gradients — both linear and radial — to any element beautifully.

🧩 1️⃣ The Power of Color in Web Design

Colors can influence emotions, attention, and usability. CSS allows you to apply color to almost any element — text, borders, backgrounds, or shadows.

🎨 2️⃣ CSS Color Values

CSS supports multiple color formats:

  • Named Colors: red, blue, green
  • HEX: #ff0000
  • RGB: rgb(255, 0, 0)
  • RGBA: rgba(255, 0, 0, 0.6) (with transparency)
  • HSL: hsl(0, 100%, 50%)
  • HSLA: hsla(0, 100%, 50%, 0.5)
h1 { color: #8e24aa; }
p { color: rgb(80, 80, 80); }
span { color: rgba(255, 0, 0, 0.8); }

🧱 3️⃣ Background Colors

You can fill any element with a background color using the background-color property. 

body {
  background-color: #f3e5f5;
}
div {
  background-color: lavender;
  padding: 20px;
}

🖼 4️⃣ Background Images

Use background-image to set an image behind your content.

body {
  background-image: url('background.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
  • background-repeat: no-repeat, repeat-x, repeat-y
  • background-size: cover, contain, or specific values
  • background-position: top, center, bottom, or coordinates

🎨 5️⃣ Multiple Backgrounds

You can layer multiple images in a single element.

div {
  background-image: url('pattern.png'), url('texture.png');
  background-position: center, top;
  background-repeat: no-repeat, repeat;
}

🌈 6️⃣ CSS Gradients

Gradients allow smooth color transitions without using image files.

➡️ Linear Gradients

div {
  background: linear-gradient(to right, #8e24aa, #ff8a65);
  height: 200px;
}

⭕ Radial Gradients

div {
  background: radial-gradient(circle, #8e24aa, #ffcc80);
}

🧮 7️⃣ Background Shorthand Property

You can combine multiple background properties in a single line: 

background: url('pattern.png') no-repeat center/cover #f3e5f5;

🧠 8️⃣ Practice Task

  1. Create a div with gradient background.
  2. Set a body background image with no-repeat and full cover.
  3. Experiment with rgba() colors to make transparent overlays.

🧮 Mini Quiz

  • Q1: What’s the difference between HEX and RGB colors?
  • Q2: Which property is used for adding a background image?
  • Q3: Can you combine multiple backgrounds?

🎯 Summary

You now know how to use colors and backgrounds effectively to improve web design. Next, we’ll explore the **Box Model**, where you’ll understand spacing, padding, borders, and margins that define every layout on the web.

Comments

Post a Comment