50 Mins beginner
9. Colors, Fonts & Text
CSS
Colors, Fonts & Text Styling
Typography and color are the first things users notice. Getting these right is the difference between a site that looks professional and one that looks amateur.
🎨 CSS Color Formats
<style>
.named { color: tomato; }
.hex { color: #00A3FF; }
.rgb { color: rgb(255, 100, 0); }
.rgba { color: rgba(0, 163, 255, 0.5); } /* 50% transparent */
.hsl { color: hsl(210, 100%, 56%); }
</style>
<p class="named">Named color: tomato</p>
<p class="hex">Hex color: #00A3FF (most common in UI work)</p>
<p class="rgb">RGB: rgb(255, 100, 0)</p>
<p class="rgba">RGBA: rgba — same but with opacity (50% here)</p>
<p class="hsl">HSL: Hue, Saturation, Lightness</p>
🎨 Background Colors & Gradients
<style>
.solid-bg { background-color: #1a1a2e; color: white; padding: 15px; margin: 5px 0; border-radius: 6px; }
.linear-grad { background: linear-gradient(135deg, #667eea, #764ba2); color: white; padding: 15px; margin: 5px 0; border-radius: 6px; }
.radial-grad { background: radial-gradient(circle, #f093fb, #f5576c); color: white; padding: 15px; margin: 5px 0; border-radius: 6px; }
</style>
<div class="solid-bg">Solid background color</div>
<div class="linear-grad">Linear gradient (angled)</div>
<div class="radial-grad">Radial gradient (circular)</div>
✏️ Font Properties
<style>
body { font-family: Arial, sans-serif; }
.big { font-size: 28px; }
.bold { font-weight: bold; }
.spaced { letter-spacing: 4px; text-transform: uppercase; }
.center { text-align: center; }
.underline { text-decoration: underline; color: #00A3FF; }
.shadow { text-shadow: 2px 2px 8px rgba(0,163,255,0.6); color: #1a1a2e; font-weight: 900; font-size: 24px; }
</style>
<p class="big">Large text — 28px</p>
<p class="bold">Bold weight text</p>
<p class="spaced">Letter Spaced Uppercase</p>
<p class="center">This text is centered</p>
<p class="underline">Underlined link style</p>
<p class="shadow">Text with a glow shadow</p>
🌐 Google Fonts
Link any Google Font by adding a <link> in your <head>:
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Space+Grotesk:wght@700&display=swap" rel="stylesheet">
<style>
.body-text { font-family: 'Inter', sans-serif; font-size: 16px; color: #333; }
.title-text { font-family: 'Space Grotesk', sans-serif; font-size: 32px; font-weight: 700; color: #1a1a2e; }
</style>
<p class="title-text">Space Grotesk — Display Font</p>
<p class="body-text">Inter — Clean, readable body font used by thousands of tech companies including Linear, Vercel, and Notion.</p>
Knowledge Check
Ready to test your understanding of 9. Colors, Fonts & Text?