CSS Full Course Day 5 [Hindi] 💻 | Colors & Backgrounds 🚀 | Mohit Decodes

🎨 CSS Tutorial – Day 5: Colors & Backgrounds

Welcome to Day 5 of the CSS Full Course [Hindi] by Mohit Decodes! Today, we’ll learn how to style your web pages with beautiful colors and backgrounds using CSS.

🔹 CSS Colors

You can apply colors using:

  1. Color names
css
CopyEdit
color: red;
  1. Hexadecimal codes
css
CopyEdit
color: #ff5733;
  1. RGB values
css
CopyEdit
color: rgb(255, 87, 51);
  1. RGBA (with transparency)
css
CopyEdit
color: rgba(255, 87, 51, 0.7);
  1. HSL and HSLA
css
CopyEdit
color: hsl(9, 100%, 60%);

🔹 Background Properties

  1. background-color — Set solid background color
  2. background-image — Add image backgrounds
  3. background-repeat — Control repeating of background images (no-repeat, repeat-x, repeat-y)
  4. background-position — Position the background image (center, top right, etc.)
  5. background-size — Resize background image (cover, contain, or specific dimensions)
  6. background-attachment — Fix the background (fixed, scroll)
  7. background — Shorthand property to set multiple background properties at once

⚙️ Example CSS:

css
CopyEdit
body {
background-color: #f0f8ff;
color: #333;
}

.header {
background-image: url('header-bg.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 300px;
color: white;
text-align: center;
padding: 50px 0;
}

💡 Tips:

  1. Use RGBA or HSLA for transparent colors and overlays
  2. Optimize background images for faster loading
  3. Use contrasting colors for readability
  4. Experiment with gradients using background-image: linear-gradient(...)