Introduction
CSS allows you to control the appearance of web pages using colors, units, and background properties. These are essential for designing visually appealing and responsive websites.
In this lesson, you will learn how to apply colors, use different units, and style backgrounds in CSS.
What You’ll Learn
- CSS color formats
- CSS units (px, %, em, rem)
- Background properties
- Best practices
These are core CSS skills used on every website.
🎨 Types of Color Values
Color Names
h1 {
color: red;
}
✔ Easy to use
❌ Limited color options
Common names:red, blue, green, black, white, gray
HEX Color Codes
p {
color: #ff0000;
}
- Starts with
# - 6 characters (numbers + letters)
Examples:
#000000→ Black#ffffff→ White#00ff00→ Green
✔ Most commonly used
RGB Colors
div {
color: rgb(255, 0, 0);
}
- Red, Green, Blue values
- Range:
0–255
Example:
rgb(0, 0, 0)→ Blackrgb(255, 255, 255)→ White
RGBA (With Transparency)
.box {
background-color: rgba(0, 0, 0, 0.5);
}
- Last value = opacity
- Range:
0(transparent) to1(solid)
🔹 HSL Colors (Missing but Important 🔥)
🎨 HSL Color Format
HSL stands for Hue, Saturation, and Lightness.
h1 {
color: hsl(0, 100%, 50%);
}
Explanation:
- Hue → Color (0–360)
- Saturation → Intensity (0%–100%)
- Lightness → Brightness (0%–100%)
👉 HSL is useful for adjusting colors easily.
🔹 Opacity Property
You can control transparency using the opacity property.
div {
opacity: 0.5;
}
👉 Value ranges from:
- 0 → Fully transparent
- 1 → Fully visible
🔹 Absolute vs Relative Units (Important 🔥)
📏 Absolute vs Relative Units
Absolute Units:
- px (fixed size)
Relative Units:
- % (relative to parent)
- em (relative to parent font size)
- rem (relative to root element)
👉 Relative units are better for responsive design.
🔹 Where Colors Are Used
- Text →
color - Background →
background-color - Border →
border-color
🔹 CSS Units
Units define the size of elements, text, spacing, and layout.
📏 Types of Units
1️⃣ Pixels (px)
p {
font-size: 16px;
}
👉 Fixed size unit
2️⃣ Percentage (%)
div {
width: 50%;
}
👉 Relative to parent element
3️⃣ em Unit
p {
font-size: 2em;
}
👉 Relative to parent font size
4️⃣ rem Unit
p {
font-size: 2rem;
}
👉 Relative to root (<html>) font size
🔹 px vs em vs rem
| Unit | Type | Based On |
|---|---|---|
| px | Fixed | Screen |
| % | Relative | Parent |
| em | Relative | Parent |
| rem | Relative | Root |
🔹 Viewport Units (Modern CSS 🔥)
📱 Viewport Units
Viewport units are based on screen size.
div {
width: 100vw;
height: 100vh;
}
Types:
- vw → viewport width
- vh → viewport height
👉 Useful for full-screen layouts.
🔹 When to Use Units
- Use px for borders and small elements
- Use % for layouts
- Use rem for font sizes (recommended 🔥)
🔎 Quick Tip
html {
font-size: 16px;
}
1rem = 16px1.5rem = 24px
🔹 CSS Backgrounds
Background properties are used to style the background of elements.
🎨 Background Color
body {
background-color: #f5f5f5;
}
🖼️ Background Image
div {
background-image: url("image.jpg");
}
🔁 Background Repeat
div {
background-repeat: no-repeat;
}
Options:
repeatno-repeatrepeat-xrepeat-y
📍 Background Position
div {
background-position: center;
}
Examples:
topbottomleftrightcenter
📏 Background Size
div {
background-size: cover;
}
Options:
cover→ fills entire areacontain→ fits image inside
Background Shorthand
You can combine background properties:
div {
background: #000 url("bg.jpg") no-repeat center / cover;
}
✔ Clean & professional
🔹 Background Attachment
📌 Background Attachment
Controls scrolling behavior of background.
div {
background-attachment: fixed;
}
Values:
- scroll (default)
- fixed
- local
👉 fixed creates a parallax effect.
🔹 Multiple Backgrounds (Advanced 🔥)
🖼️ Multiple Backgrounds
You can use more than one background.
div {
background: url("img1.jpg"), url("img2.jpg");
}
👉 Images are layered on top of each other.
🔹 Complete Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f0f0f0;
} h1 {
color: #333;
font-size: 2rem;
} .box {
width: 50%;
height: 200px;
background: url("image.jpg") no-repeat center/cover;
color: white;
padding: 20px;
}
</style>
</head>
<body><h1>CSS Example</h1>
<div class="box">Styled Box</div></body>
</html>
🔹 Important Notes
- Avoid large image files
- Use HEX or RGB for precise colors
- Prefer
remfor scalable design - Optimize images for backgrounds
🔹 Common Mistakes
- Using too many colors
- Mixing units incorrectly
- Not setting background size
- Using large images
🔹 Best Practices
- Keep color scheme consistent
- Use relative units for responsiveness
- Use background images carefully
- Write clean CSS
🔹 Practice Tasks
- Task 1: Apply different colors to text.
- Task 2: Use px, %, and rem units.
- Task 3: Add a background image.
- Task 4: Use background shorthand.
FAQs
What is the best color format?
HEX and RGB are most commonly used.
Which unit is best for fonts?
rem is recommended.
Which unit is best for fonts?
rem is recommended.
Conclusion
CSS colors, units, and backgrounds are essential tools for designing modern web pages. By using the right color formats, flexible units, and background properties, you can create visually appealing and responsive designs.
👉 In the next tutorial, you will learn about CSS Borders & Box Model.