🎨 CSS COURSE – MODULE 3: COLORS & UNITS

📁 File: colors-units.md

🎨 Colors & Units in CSS

📌 Introduction

CSS uses colors and units to define how elements look and how they are sized.

👉 Colors = appearance 👉 Units = sizing & spacing

1. CSS Color Types

🟥 HEX Colors

Most common in web design.

h1 {
  color: #ff0000;
}

✔ Red color ✔ Starts with #

🟩 RGB Colors

Uses Red, Green, Blue values.

h1 {
  color: rgb(255, 0, 0);
}

✔ Same red color ✔ Range: 0 → 255

🟦 RGBA Colors (with transparency)

div {
  background-color: rgba(0, 0, 0, 0.5);
}

✔ Last value = transparency (0 → 1)

HSL Colors

Hue, Saturation, Lightness

h1 {
  color: hsl(0, 100%, 50%);
}

✔ More human-friendly color system

🎯 Color Comparison

📏 2. CSS Units

📌 Absolute Units

📍 px (Pixels)

p {
  font-size: 16px;
}

✔ Fixed size ✔ Most commonly used

📐 Relative Units (VERY IMPORTANT)

📌 %

div {
  width: 50%;
}

✔ Relative to parent

📌 em

p {
  font-size: 2em;
}

✔ Relative to parent font size

📌 rem (BEST PRACTICE)

p {
  font-size: 1.5rem;
}

✔ Relative to root (html) ✔ Used in modern websites

📱 Viewport Units (RESPONSIVE DESIGN)

📌 vw (viewport width)

div {
  width: 50vw;
}

✔ 50% of screen width

📌 vh (viewport height)

div {
  height: 100vh;
}

✔ Full screen height

🧠 Important Concept

px → fixed
% → parent-based
em → relative to parent text
rem → root-based (recommended)
vw/vh → screen-based

🧩 Real Example

<div class="box">
  <h1>Hello CSS</h1>
  <p>Learning colors and units</p>
</div>

.box {
  width: 50%;
  background-color: #f0f0f0;
  padding: 20px;
}

h1 {
  color: rgb(0, 120, 255);
  font-size: 2rem;
}

p {
  color: rgba(0, 0, 0, 0.7);
  font-size: 1rem;
}

⚠️ Common Mistakes

• Mixing px and em randomly ❌
• Not understanding rem ❌
• Overusing px in responsive design ❌
• Using too many color formats randomly ❌

🧪 Mini Exercise

Create a page with:

1. A heading with HEX color
2. A paragraph with RGB color
3. A container using % width
4. A box using padding in px
5. Text using rem