🎨 Styling with Colors and Fonts

CSS lets you bring personality to your pages by customizing colors and fonts. Whether you're aiming for clean minimalism or chaotic neon rage, it's all in your hands.

🌈 Colors

You can define colors in different formats:

• red — named color
• #ff0000 — hex code
• rgb(255, 0, 0) — RGB format
• hsl(0, 100%, 50%) — HSL format

💡 Example:

p {
  color: #333;
  background-color: #f0f0f0;
}

📝 Fonts

You can control the font style with the font-family property. Always include fallbacks in case your first choice fails.

body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

You can also tweak:

• font-size — controls how big text appears
• font-weight — controls thickness (normal, bold, etc.)
• line-height — vertical spacing between lines

🔗 Using Google Fonts

Google Fonts makes it easy to use custom web fonts. Just include a <link> in your HTML and update your CSS.

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

body {
  font-family: 'Roboto', sans-serif;
}

✅ Summary

• Use named colors, hex, RGB, or HSL to define colors
• Use font-family with fallbacks for safe rendering
• Google Fonts = quick way to bring stylish fonts into your site
• Always test color contrast and readability!

Up next: layout and spacing, let's start positioning and aligning elements like a pro 🧱