✅ Module 9: Colors, Backgrounds, and Borders (🌈🖼️)

🌈 Module 9: Colors, Backgrounds, and Borders

Color and background styling plays a major role in branding, accessibility, and user interface design. CSS offers multiple ways to apply colors, background images, and borders. 🎨

🧪 Color Formats

• name: red, blue, green
• hex: #FF0000
• rgb(): rgb(255, 0, 0)
• rgba(): with opacity (e.g., rgba(255, 0, 0, 0.5))
• hsl(): hue, saturation, lightness

🖼️ Background Properties

• background-color: Sets background color
• background-image: Adds an image
• background-repeat: no-repeat, repeat-x/y
• background-position: top left, center center, etc.
• background-size: cover, contain, auto
• background-attachment: scroll or fixed

🧱 Borders

box {
  border: 2px solid red;
  border-radius: 10px;
}
  

• border-style: solid, dashed, dotted, double, groove
• border-width: Thin, medium, thick, px values
• border-color: Any CSS color
• border-radius: Rounds the corners (circle buttons, cards)

✅ Summary

• Use consistent color schemes with proper contrast for readability. 🧑‍🎨
• Use backgrounds and borders to create depth and visual hierarchy.
• Try gradients and transparency for modern designs.