Master CSS colors and typography to create visually appealing designs. Learn color systems, font properties, and text styling techniques.
Colors and typography are the soul of web design. They convey emotion, establish hierarchy, communicate brand identity, and determine whether your website feels professional or amateur. While HTML provides structure, CSS colors and typography transform plain text into compelling visual experiences.
Professional web designers understand that color theory and typography aren't just aesthetic choices - they're powerful communication tools. The right color palette can increase user engagement by 80%, while proper typography can improve reading comprehension by 60%.
In this lesson, you'll master CSS color systems from basic hex codes to advanced HSL functions, learn typography fundamentals that create readable and beautiful text, and discover how to implement custom web fonts that make your designs stand out from the crowd.
CSS offers multiple color systems, each with specific advantages for different use cases. Understanding when and how to use each system gives you precise control over your color choices.
1. Hex Colors (Hexadecimal)
The most common color format, using 6-digit hexadecimal notation.
1.primary { color: #3b82f6; } /* Blue */
2.success { color: #10b981; } /* Green */
3.danger { color: #ef4444; } /* Red */
4.dark { color: #1f2937; } /* Dark gray */
5.light { color: #f9fafb; } /* Light gray */Shorthand Hex:
1.white { color: #fff; } /* Same as #ffffff */
2.black { color: #000; } /* Same as #000000 */
3.red { color: #f00; } /* Same as #ff0000 */2. RGB Colors (Red, Green, Blue)
Perfect for precise color control and transparency effects.
1.rgb-blue { color: rgb(59, 130, 246); }
2.rgb-transparent { background: rgba(59, 130, 246, 0.5); }
3.rgb-overlay { background: rgba(0, 0, 0, 0.8); }3. HSL Colors (Hue, Saturation, Lightness)
Most intuitive for creating color variations and themes.
1.hsl-base { color: hsl(217, 91%, 60%); } /* Base blue */
2.hsl-light { color: hsl(217, 91%, 80%); } /* Lighter blue */
3.hsl-dark { color: hsl(217, 91%, 40%); } /* Darker blue */
4.hsl-muted { color: hsl(217, 30%, 60%); } /* Desaturated blue */4. Modern CSS Colors
1.modern-colors {
2 color: oklch(65% 0.15 250); /* OKLCH color space */
3 background: color-mix(in srgb, red 30%, blue);
4 border-color: light-dark(#333, #ccc); /* Light/dark mode */
5}Color Best Practices:
Professional Color Workflows:
1:root {
2 /* Primary color palette */
3 --primary-50: hsl(217, 91%, 95%);
4 --primary-500: hsl(217, 91%, 60%);
5 --primary-900: hsl(217, 91%, 20%);
6
7 /* Semantic colors */
8 --success: hsl(142, 76%, 36%);
9 --warning: hsl(38, 92%, 50%);
10 --error: hsl(0, 84%, 60%);
11}Color Theory in Practice:
Typography is the art and technique of arranging type to make written language readable and appealing. CSS provides extensive control over every aspect of text presentation.
1. Font Family and Font Stack
Always provide fallback fonts for reliability.
1/* System font stacks for performance */
2.system-fonts {
3 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
4 Oxygen, Ubuntu, Cantarell, sans-serif;
5}
6
7/* Custom font with fallbacks */
8.branded-text {
9 font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
10}
11
12/* Specific font categories */
13.serif { font-family: Georgia, 'Times New Roman', Times, serif; }
14.sans-serif { font-family: Arial, Helvetica, sans-serif; }
15.monospace { font-family: 'Courier New', Courier, monospace; }
16.cursive { font-family: 'Dancing Script', cursive; }2. Font Size and Sizing Units
Choose appropriate units for different use cases.
1.typography-scale {
2 /* Absolute units */
3 font-size: 16px; /* Fixed pixel size */
4 font-size: 12pt; /* Print-friendly points */
5
6 /* Relative units */
7 font-size: 1.2em; /* Relative to parent */
8 font-size: 1.2rem; /* Relative to root */
9 font-size: 120%; /* Percentage of parent */
10
11 /* Viewport units */
12 font-size: 4vw; /* 4% of viewport width */
13 font-size: 8vh; /* 8% of viewport height */
14}
15
16/* Typographic scale */
17.text-xs { font-size: 0.75rem; } /* 12px */
18.text-sm { font-size: 0.875rem; } /* 14px */
19.text-base { font-size: 1rem; } /* 16px */
20.text-lg { font-size: 1.125rem; } /* 18px */
21.text-xl { font-size: 1.25rem; } /* 20px */
22.text-2xl { font-size: 1.5rem; } /* 24px */
23.text-3xl { font-size: 1.875rem; } /* 30px */
24.text-4xl { font-size: 2.25rem; } /* 36px */3. Font Weight and Style
Control text emphasis and visual hierarchy.
1.font-weights {
2 font-weight: 100; /* Thin */
3 font-weight: 300; /* Light */
4 font-weight: 400; /* Normal/Regular */
5 font-weight: 500; /* Medium */
6 font-weight: 600; /* Semi-bold */
7 font-weight: 700; /* Bold */
8 font-weight: 900; /* Black */
9
10 /* Named values */
11 font-weight: normal; /* Same as 400 */
12 font-weight: bold; /* Same as 700 */
13 font-weight: lighter; /* Relative to parent */
14 font-weight: bolder; /* Relative to parent */
15}
16
17.font-styles {
18 font-style: normal; /* Default */
19 font-style: italic; /* Italicized */
20 font-style: oblique; /* Slanted */
21}4. Line Height and Text Spacing
Essential for readability and visual appeal.
1.text-spacing {
2 /* Line height (leading) */
3 line-height: 1.4; /* Tight spacing */
4 line-height: 1.6; /* Optimal for body text */
5 line-height: 1.8; /* Loose spacing */
6 line-height: 2; /* Double spacing */
7
8 /* Letter spacing (tracking) */
9 letter-spacing: -0.025em; /* Tighter */
10 letter-spacing: 0; /* Normal */
11 letter-spacing: 0.05em; /* Looser */
12
13 /* Word spacing */
14 word-spacing: 0.1em; /* Slightly increased */
15}5. Text Transformation and Decoration
Modify text appearance and emphasis.
1.text-transforms {
2 text-transform: uppercase; /* ALL CAPS */
3 text-transform: lowercase; /* all lowercase */
4 text-transform: capitalize; /* Title Case */
5 text-transform: none; /* Original case */
6}
7
8.text-decorations {
9 text-decoration: none; /* Remove default link underline */
10 text-decoration: underline; /* Add underline */
11 text-decoration: line-through; /* Strikethrough */
12 text-decoration: overline; /* Line above text */
13
14 /* Modern text-decoration properties */
15 text-decoration-line: underline;
16 text-decoration-color: #3b82f6;
17 text-decoration-style: wavy;
18 text-decoration-thickness: 2px;
19}Typography Best Practices:
Web fonts allow you to use custom typography beyond system fonts, but they require careful implementation for performance and accessibility.
1. Google Fonts Integration
The most popular web font service with optimized delivery.
1<!-- HTML link method (in <head>) -->
2<link rel="preconnect" href="https://fonts.googleapis.com">
3<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
4<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">1/* CSS @import method (less recommended) */
2@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
3
4/* Using the imported font */
5body {
6 font-family: 'Inter', system-ui, -apple-system, sans-serif;
7}2. Self-Hosted Fonts
For better performance and privacy control.
1@font-face {
2 font-family: 'CustomFont';
3 src: url('/fonts/customfont.woff2') format('woff2'),
4 url('/fonts/customfont.woff') format('woff'),
5 url('/fonts/customfont.ttf') format('truetype');
6 font-weight: normal;
7 font-style: normal;
8 font-display: swap; /* Important for performance */
9}
10
11/* Multiple font weights */
12@font-face {
13 font-family: 'CustomFont';
14 src: url('/fonts/customfont-bold.woff2') format('woff2');
15 font-weight: 700;
16 font-style: normal;
17 font-display: swap;
18}3. Font Loading Optimization
Critical for performance and user experience.
1/* Font-display strategies */
2@font-face {
3 font-family: 'OptimizedFont';
4 src: url('font.woff2') format('woff2');
5 font-display: swap; /* Recommended: show fallback, then swap */
6 font-display: block; /* Brief invisible period, then render */
7 font-display: fallback; /* Brief swap period, then permanent */
8 font-display: optional; /* Use custom font only if cached */
9}1<!-- Font preloading for critical fonts -->
2<link rel="preload" href="/fonts/critical-font.woff2" as="font" type="font/woff2" crossorigin>4. Font Stack Strategies
Always provide comprehensive fallbacks.
1/* Progressive font stacks */
2.heading {
3 font-family:
4 'Playfair Display', /* Custom web font */
5 'Georgia Pro', /* Enhanced system serif */
6 Georgia, /* Standard serif */
7 'Times New Roman', /* Windows fallback */
8 Times, /* Mac fallback */
9 serif; /* Generic fallback */
10}
11
12.body-text {
13 font-family:
14 'Inter', /* Custom sans-serif */
15 system-ui, /* System UI font */
16 -apple-system, /* macOS San Francisco */
17 'Segoe UI', /* Windows */
18 Roboto, /* Android */
19 Ubuntu, /* Ubuntu */
20 sans-serif; /* Generic fallback */
21}
22
23.code {
24 font-family:
25 'JetBrains Mono', /* Custom monospace */
26 'SF Mono', /* macOS Terminal */
27 Monaco, /* macOS */
28 'Cascadia Code', /* Windows Terminal */
29 'Roboto Mono', /* Android */
30 'Consolas', /* Windows */
31 monospace; /* Generic fallback */
32}5. Variable Fonts
Modern font technology for maximum flexibility.
1@font-face {
2 font-family: 'VariableFont';
3 src: url('variable-font.woff2') format('woff2-variations');
4 font-weight: 100 900; /* Weight range */
5 font-style: oblique 0deg 12deg; /* Style range */
6}
7
8.variable-text {
9 font-family: 'VariableFont', sans-serif;
10 font-weight: 450; /* Any value between 100-900 */
11 font-variation-settings:
12 'wght' 450, /* Weight axis */
13 'wdth' 75, /* Width axis */
14 'slnt' 0; /* Slant axis */
15}Font Loading Best Practices:
font-display: swap for better perceived performancePerformance Considerations:
1/* Optimized Google Fonts loading */
2/* Only load needed weights and styles */
3@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
4
5/* Font subsetting for specific languages */
6@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400&subset=latin,latin-ext&display=swap');Accessibility Considerations:
Modern CSS offers sophisticated text styling capabilities that go beyond basic formatting, enabling creative and functional typography layouts.
1. Text Alignment and Direction
Control text flow and alignment for different content types.
1.text-alignment {
2 text-align: left; /* Default for LTR languages */
3 text-align: right; /* Right-aligned text */
4 text-align: center; /* Centered text */
5 text-align: justify; /* Justified text */
6 text-align: start; /* Logical start (RTL/LTR aware) */
7 text-align: end; /* Logical end (RTL/LTR aware) */
8}
9
10/* Vertical alignment */
11.vertical-text {
12 vertical-align: top;
13 vertical-align: middle;
14 vertical-align: bottom;
15 vertical-align: baseline;
16 vertical-align: sub;
17 vertical-align: super;
18}
19
20/* Text direction for internationalization */
21.rtl-text {
22 direction: rtl; /* Right-to-left */
23 unicode-bidi: bidi-override;
24}2. Text Overflow and White Space
Handle text that doesn't fit within containers.
1.text-overflow {
2 /* Single line truncation */
3 white-space: nowrap;
4 overflow: hidden;
5 text-overflow: ellipsis;
6}
7
8/* Multi-line truncation */
9.multiline-truncate {
10 display: -webkit-box;
11 -webkit-box-orient: vertical;
12 -webkit-line-clamp: 3; /* Show 3 lines */
13 overflow: hidden;
14}
15
16/* White space handling */
17.whitespace-control {
18 white-space: normal; /* Default behavior */
19 white-space: nowrap; /* Prevent line breaks */
20 white-space: pre; /* Preserve all whitespace */
21 white-space: pre-line; /* Preserve line breaks */
22 white-space: pre-wrap; /* Preserve whitespace, allow wrapping */
23}3. Advanced Text Effects
Create visually striking text with CSS effects.
1.text-effects {
2 /* Text shadows */
3 text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
4 text-shadow: 0 0 10px #3b82f6; /* Glow effect */
5
6 /* Multiple shadows */
7 text-shadow:
8 1px 1px 0px #ccc,
9 2px 2px 0px #999,
10 3px 3px 0px #666;
11
12 /* Gradient text (WebKit) */
13 background: linear-gradient(45deg, #3b82f6, #8b5cf6);
14 -webkit-background-clip: text;
15 -webkit-text-fill-color: transparent;
16 background-clip: text;
17}
18
19/* Text stroke */
20.text-stroke {
21 -webkit-text-stroke: 2px #333;
22 text-stroke: 2px #333;
23}
24
25/* 3D text effect */
26.text-3d {
27 color: #3b82f6;
28 text-shadow:
29 1px 1px 0 #2563eb,
30 2px 2px 0 #1d4ed8,
31 3px 3px 0 #1e40af,
32 4px 4px 0 #1e3a8a,
33 5px 5px 10px rgba(0,0,0,0.3);
34}4. Responsive Typography
Scale typography appropriately across devices.
1/* Fluid typography using clamp() */
2.responsive-heading {
3 font-size: clamp(1.5rem, 4vw, 3rem);
4 /* Min: 24px, Scale: 4% of viewport, Max: 48px */
5}
6
7/* Responsive line-height */
8.responsive-text {
9 line-height: clamp(1.4, 1.2 + 1vw, 1.8);
10}
11
12/* Media query approach */
13@media (max-width: 768px) {
14 .heading { font-size: 2rem; }
15 .body-text { font-size: 14px; }
16}
17
18@media (min-width: 1200px) {
19 .heading { font-size: 3.5rem; }
20 .body-text { font-size: 18px; }
21}5. CSS Text Properties for Fine Control
Modern CSS properties for professional typography.
1.advanced-typography {
2 /* Text rendering optimization */
3 text-rendering: optimizeLegibility;
4 -webkit-font-smoothing: antialiased;
5 -moz-osx-font-smoothing: grayscale;
6
7 /* Font feature settings */
8 font-feature-settings:
9 "kern" 1, /* Enable kerning */
10 "liga" 1, /* Enable ligatures */
11 "calt" 1; /* Contextual alternates */
12
13 /* Font variant properties */
14 font-variant-numeric: tabular-nums; /* Monospaced numbers */
15 font-variant-caps: small-caps; /* Small capitals */
16
17 /* Hyphenation */
18 hyphens: auto;
19 hyphenate-limit-chars: 6 3 3;
20
21 /* Text spacing fine-tuning */
22 text-indent: 1.5em; /* First line indent */
23 hanging-punctuation: first last;
24}Typography Layout Patterns:
1/* Drop cap */
2.drop-cap::first-letter {
3 float: left;
4 font-size: 4em;
5 line-height: 0.8;
6 margin: 0.1em 0.1em 0 0;
7 font-weight: bold;
8 color: #3b82f6;
9}
10
11/* Pull quote */
12.pull-quote {
13 font-size: 1.5em;
14 font-style: italic;
15 color: #6b7280;
16 border-left: 4px solid #3b82f6;
17 padding-left: 1em;
18 margin: 2em 0;
19}
20
21/* Highlight box */
22.highlight-box {
23 background: linear-gradient(120deg, #a8edea 0%, #fed6e3 100%);
24 padding: 1em;
25 border-radius: 0.5em;
26 font-weight: 500;
27}Best Practices for Advanced Typography:
A comprehensive demonstration of CSS colors and typography featuring modern color systems, professional font combinations, and advanced text styling techniques.
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Colors & Typography - Design System Showcase</title>
7
8 <!-- Google Fonts -->
9 <link rel="preconnect" href="https://fonts.googleapis.com">
10 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
12
13 <style>
14 /* =================
15 CSS CUSTOM PROPERTIES - COLOR SYSTEM
16 ================= */
17 :root {
18 /* Primary Color Palette (Blue) */
19 --primary-50: hsl(217, 91%, 95%);
20 --primary-100: hsl(217, 91%, 90%);
21 --primary-200: hsl(217, 91%, 80%);
22 --primary-300: hsl(217, 91%, 70%);
23 --primary-400: hsl(217, 91%, 65%);
24 --primary-500: hsl(217, 91%, 60%); /* Base */
25 --primary-600: hsl(217, 91%, 55%);
26 --primary-700: hsl(217, 91%, 45%);
27 --primary-800: hsl(217, 91%, 35%);
28 --primary-900: hsl(217, 91%, 20%);
29
30 /* Secondary Color Palette (Purple) */
31 --secondary-500: hsl(262, 83%, 58%);
32 --secondary-600: hsl(262, 83%, 48%);
33
34 /* Accent Colors */
35 --accent-success: hsl(142, 76%, 36%);
36 --accent-warning: hsl(38, 92%, 50%);
37 --accent-error: hsl(0, 84%, 60%);
38 --accent-info: hsl(199, 89%, 48%);
39
40 /* Neutral Grays */
41 --gray-50: hsl(210, 20%, 98%);
42 --gray-100: hsl(220, 14%, 96%);
43 --gray-200: hsl(220, 13%, 91%);
44 --gray-300: hsl(216, 12%, 84%);
45 --gray-400: hsl(218, 11%, 65%);
46 --gray-500: hsl(220, 9%, 46%);
47 --gray-600: hsl(215, 14%, 34%);
48 --gray-700: hsl(217, 19%, 27%);
49 --gray-800: hsl(215, 28%, 17%);
50 --gray-900: hsl(221, 39%, 11%);
51
52 /* Typography Scale */
53 --font-xs: 0.75rem; /* 12px */
54 --font-sm: 0.875rem; /* 14px */
55 --font-base: 1rem; /* 16px */
56 --font-lg: 1.125rem; /* 18px */
57 --font-xl: 1.25rem; /* 20px */
58 --font-2xl: 1.5rem; /* 24px */
59 --font-3xl: 1.875rem; /* 30px */
60 --font-4xl: 2.25rem; /* 36px */
61 --font-5xl: 3rem; /* 48px */
62 --font-6xl: 3.75rem; /* 60px */
63
64 /* Font Families */
65 --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
66 --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
67 --font-mono: 'JetBrains Mono', 'SF Mono', Monaco, 'Consolas', monospace;
68
69 /* Line Heights */
70 --leading-tight: 1.25;
71 --leading-snug: 1.375;
72 --leading-normal: 1.5;
73 --leading-relaxed: 1.625;
74 --leading-loose: 2;
75 }
76
77 /* =================
78 RESET AND BASE STYLES
79 ================= */
80 * {
81 margin: 0;
82 padding: 0;
83 box-sizing: border-box;
84 }
85
86 body {
87 font-family: var(--font-sans);
88 font-size: var(--font-base);
89 line-height: var(--leading-normal);
90 color: var(--gray-800);
91 background-color: var(--gray-50);
92 font-feature-settings: "kern" 1, "liga" 1;
93 text-rendering: optimizeLegibility;
94 -webkit-font-smoothing: antialiased;
95 -moz-osx-font-smoothing: grayscale;
96 }
97
98 /* =================
99 TYPOGRAPHY CLASSES
100 ================= */
101
102 /* Font Families */
103 .font-sans { font-family: var(--font-sans); }
104 .font-serif { font-family: var(--font-serif); }
105 .font-mono { font-family: var(--font-mono); }
106
107 /* Font Sizes */
108 .text-xs { font-size: var(--font-xs); }
109 .text-sm { font-size: var(--font-sm); }
110 .text-base { font-size: var(--font-base); }
111 .text-lg { font-size: var(--font-lg); }
112 .text-xl { font-size: var(--font-xl); }
113 .text-2xl { font-size: var(--font-2xl); }
114 .text-3xl { font-size: var(--font-3xl); }
115 .text-4xl { font-size: var(--font-4xl); }
116 .text-5xl { font-size: var(--font-5xl); }
117 .text-6xl { font-size: var(--font-6xl); }
118
119 /* Font Weights */
120 .font-light { font-weight: 300; }
121 .font-normal { font-weight: 400; }
122 .font-medium { font-weight: 500; }
123 .font-semibold { font-weight: 600; }
124 .font-bold { font-weight: 700; }
125 .font-extrabold { font-weight: 800; }
126
127 /* Line Heights */
128 .leading-tight { line-height: var(--leading-tight); }
129 .leading-snug { line-height: var(--leading-snug); }
130 .leading-normal { line-height: var(--leading-normal); }
131 .leading-relaxed { line-height: var(--leading-relaxed); }
132 .leading-loose { line-height: var(--leading-loose); }
133
134 /* Text Transforms */
135 .uppercase { text-transform: uppercase; }
136 .lowercase { text-transform: lowercase; }
137 .capitalize { text-transform: capitalize; }
138
139 /* Text Alignment */
140 .text-left { text-align: left; }
141 .text-center { text-align: center; }
142 .text-right { text-align: right; }
143 .text-justify { text-align: justify; }
144
145 /* =================
146 COLOR CLASSES
147 ================= */
148
149 /* Text Colors */
150 .text-primary { color: var(--primary-500); }
151 .text-primary-dark { color: var(--primary-700); }
152 .text-secondary { color: var(--secondary-500); }
153 .text-success { color: var(--accent-success); }
154 .text-warning { color: var(--accent-warning); }
155 .text-error { color: var(--accent-error); }
156 .text-gray { color: var(--gray-500); }
157 .text-gray-dark { color: var(--gray-700); }
158 .text-gray-light { color: var(--gray-400); }
159
160 /* Background Colors */
161 .bg-primary { background-color: var(--primary-500); }
162 .bg-primary-light { background-color: var(--primary-100); }
163 .bg-white { background-color: white; }
164 .bg-gray-light { background-color: var(--gray-100); }
165
166 /* =================
167 LAYOUT COMPONENTS
168 ================= */
169 .container {
170 max-width: 1200px;
171 margin: 0 auto;
172 padding: 2rem;
173 }
174
175 .section {
176 margin-bottom: 4rem;
177 background: white;
178 border-radius: 16px;
179 padding: 2.5rem;
180 box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
181 0 2px 4px -1px rgba(0, 0, 0, 0.06);
182 }
183
184 .grid {
185 display: grid;
186 gap: 2rem;
187 }
188
189 .grid-2 { grid-template-columns: repeat(2, 1fr); }
190 .grid-3 { grid-template-columns: repeat(3, 1fr); }
191 .grid-4 { grid-template-columns: repeat(4, 1fr); }
192
193 /* =================
194 HEADER STYLES
195 ================= */
196 .hero-header {
197 background: linear-gradient(135deg,
198 var(--primary-600) 0%,
199 var(--secondary-600) 100%);
200 color: white;
201 text-align: center;
202 padding: 4rem 2rem;
203 border-radius: 20px;
204 margin-bottom: 3rem;
205 }
206
207 .hero-title {
208 font-family: var(--font-serif);
209 font-size: clamp(2.5rem, 5vw, 4rem);
210 font-weight: 700;
211 line-height: 1.1;
212 margin-bottom: 1rem;
213 text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
214 }
215
216 .hero-subtitle {
217 font-size: var(--font-xl);
218 font-weight: 300;
219 opacity: 0.9;
220 max-width: 600px;
221 margin: 0 auto;
222 }
223
224 /* =================
225 COLOR PALETTE SHOWCASE
226 ================= */
227 .color-swatch {
228 border-radius: 12px;
229 padding: 1.5rem;
230 text-align: center;
231 color: white;
232 font-weight: 600;
233 min-height: 100px;
234 display: flex;
235 align-items: center;
236 justify-content: center;
237 transition: transform 0.2s ease, box-shadow 0.2s ease;
238 }
239
240 .color-swatch:hover {
241 transform: translateY(-2px);
242 box-shadow: 0 10px 25px rgba(0,0,0,0.15);
243 }
244
245 .swatch-primary { background-color: var(--primary-500); }
246 .swatch-secondary { background-color: var(--secondary-500); }
247 .swatch-success { background-color: var(--accent-success); }
248 .swatch-warning { background-color: var(--accent-warning); }
249 .swatch-error { background-color: var(--accent-error); }
250 .swatch-gray { background-color: var(--gray-600); }
251
252 /* =================
253 TYPOGRAPHY SHOWCASE
254 ================= */
255 .typography-demo h1 {
256 font-family: var(--font-serif);
257 font-size: var(--font-5xl);
258 font-weight: 700;
259 color: var(--gray-800);
260 margin-bottom: 0.5rem;
261 line-height: 1.2;
262 }
263
264 .typography-demo h2 {
265 font-family: var(--font-serif);
266 font-size: var(--font-3xl);
267 font-weight: 600;
268 color: var(--primary-700);
269 margin: 2rem 0 1rem;
270 line-height: 1.3;
271 }
272
273 .typography-demo h3 {
274 font-family: var(--font-sans);
275 font-size: var(--font-2xl);
276 font-weight: 600;
277 color: var(--gray-700);
278 margin: 1.5rem 0 0.75rem;
279 }
280
281 .typography-demo p {
282 font-size: var(--font-lg);
283 line-height: var(--leading-relaxed);
284 color: var(--gray-600);
285 margin-bottom: 1rem;
286 }
287
288 .typography-demo .lead {
289 font-size: var(--font-xl);
290 font-weight: 400;
291 color: var(--gray-700);
292 line-height: var(--leading-relaxed);
293 }
294
295 .typography-demo blockquote {
296 border-left: 4px solid var(--primary-500);
297 padding-left: 1.5rem;
298 margin: 2rem 0;
299 font-style: italic;
300 font-size: var(--font-lg);
301 color: var(--gray-600);
302 }
303
304 .typography-demo code {
305 font-family: var(--font-mono);
306 background-color: var(--gray-100);
307 color: var(--primary-700);
308 padding: 0.25rem 0.5rem;
309 border-radius: 4px;
310 font-size: 0.9em;
311 }
312
313 /* =================
314 TEXT EFFECTS SHOWCASE
315 ================= */
316 .text-gradient {
317 background: linear-gradient(45deg,
318 var(--primary-500),
319 var(--secondary-500));
320 -webkit-background-clip: text;
321 background-clip: text;
322 -webkit-text-fill-color: transparent;
323 font-weight: 700;
324 }
325
326 .text-shadow {
327 text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
328 }
329
330 .text-glow {
331 text-shadow: 0 0 20px var(--primary-500);
332 color: var(--primary-500);
333 font-weight: 600;
334 }
335
336 .text-3d {
337 color: var(--primary-500);
338 text-shadow:
339 1px 1px 0 var(--primary-600),
340 2px 2px 0 var(--primary-700),
341 3px 3px 0 var(--primary-800),
342 4px 4px 8px rgba(0,0,0,0.3);
343 }
344
345 /* =================
346 ADVANCED TEXT LAYOUTS
347 ================= */
348 .drop-cap::first-letter {
349 float: left;
350 font-family: var(--font-serif);
351 font-size: 4em;
352 line-height: 0.8;
353 margin: 0.1em 0.2em 0 0;
354 font-weight: 700;
355 color: var(--primary-500);
356 }
357
358 .pull-quote {
359 font-size: var(--font-2xl);
360 font-style: italic;
361 font-weight: 500;
362 color: var(--primary-600);
363 text-align: center;
364 padding: 2rem;
365 border-top: 2px solid var(--primary-200);
366 border-bottom: 2px solid var(--primary-200);
367 margin: 2rem 0;
368 }
369
370 .highlight-box {
371 background: linear-gradient(120deg,
372 rgba(59, 130, 246, 0.1) 0%,
373 rgba(139, 92, 246, 0.1) 100%);
374 border-left: 4px solid var(--primary-500);
375 padding: 1.5rem;
376 border-radius: 0 8px 8px 0;
377 margin: 1.5rem 0;
378 }
379
380 /* =================
381 RESPONSIVE DESIGN
382 ================= */
383 @media (max-width: 768px) {
384 .container { padding: 1rem; }
385 .section { padding: 1.5rem; }
386 .grid-2, .grid-3, .grid-4 {
387 grid-template-columns: 1fr;
388 }
389 .hero-header { padding: 2rem 1rem; }
390 }
391
392 /* =================
393 UTILITY CLASSES
394 ================= */
395 .mb-1 { margin-bottom: 0.5rem; }
396 .mb-2 { margin-bottom: 1rem; }
397 .mb-4 { margin-bottom: 2rem; }
398 .mt-4 { margin-top: 2rem; }
399 .p-4 { padding: 2rem; }
400 .rounded { border-radius: 8px; }
401 .shadow { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
402 </style>
403</head>
404<body>
405 <div class="container">
406 <!-- Hero Header -->
407 <header class="hero-header">
408 <h1 class="hero-title">Colors & Typography</h1>
409 <p class="hero-subtitle">A comprehensive showcase of modern CSS color systems and professional typography</p>
410 </header>
411
412 <!-- Color Palette Section -->
413 <section class="section">
414 <h2 class="text-3xl font-serif font-bold text-gray-800 mb-4">🎨 Color System</h2>
415 <p class="text-lg text-gray-600 mb-4">Our design system uses HSL colors for easy manipulation and consistent theming.</p>
416
417 <div class="grid grid-3 mb-4">
418 <div class="color-swatch swatch-primary">
419 <div>
420 <div class="font-bold">Primary</div>
421 <div class="text-sm opacity-75">hsl(217, 91%, 60%)</div>
422 </div>
423 </div>
424 <div class="color-swatch swatch-secondary">
425 <div>
426 <div class="font-bold">Secondary</div>
427 <div class="text-sm opacity-75">hsl(262, 83%, 58%)</div>
428 </div>
429 </div>
430 <div class="color-swatch swatch-success">
431 <div>
432 <div class="font-bold">Success</div>
433 <div class="text-sm opacity-75">hsl(142, 76%, 36%)</div>
434 </div>
435 </div>
436 <div class="color-swatch swatch-warning">
437 <div>
438 <div class="font-bold">Warning</div>
439 <div class="text-sm opacity-75">hsl(38, 92%, 50%)</div>
440 </div>
441 </div>
442 <div class="color-swatch swatch-error">
443 <div>
444 <div class="font-bold">Error</div>
445 <div class="text-sm opacity-75">hsl(0, 84%, 60%)</div>
446 </div>
447 </div>
448 <div class="color-swatch swatch-gray">
449 <div>
450 <div class="font-bold">Neutral</div>
451 <div class="text-sm opacity-75">hsl(215, 14%, 34%)</div>
452 </div>
453 </div>
454 </div>
455 </section>
456
457 <!-- Typography Hierarchy -->
458 <section class="section typography-demo">
459 <h2 class="text-3xl font-serif font-bold text-gray-800 mb-4">📝 Typography Hierarchy</h2>
460
461 <h1>Heading Level 1 - Playfair Display</h1>
462 <p class="lead">This is a lead paragraph with increased font size and weight for emphasis.</p>
463
464 <h2>Heading Level 2 - Serif Style</h2>
465 <p>This is regular body text using the Inter font family. It demonstrates proper line spacing and readable font sizes for extended reading. The line height is optimized for comfort.</p>
466
467 <h3>Heading Level 3 - Sans Serif</h3>
468 <p>Paragraph text continues to maintain consistency throughout the design. Notice how the <code>font-family</code> property creates a clear hierarchy between different text elements.</p>
469
470 <blockquote>
471 "Typography is the craft of endowing human language with a durable visual form."
472 <cite>- Robert Bringhurst</cite>
473 </blockquote>
474 </section>
475
476 <!-- Font Family Showcase -->
477 <section class="section">
478 <h2 class="text-3xl font-serif font-bold text-gray-800 mb-4">🔤 Font Families</h2>
479
480 <div class="grid grid-3">
481 <div class="bg-gray-light p-4 rounded">
482 <h3 class="font-sans font-semibold text-xl mb-2">Sans Serif</h3>
483 <p class="font-sans">Inter font family provides excellent readability for body text and user interfaces.</p>
484 </div>
485 <div class="bg-gray-light p-4 rounded">
486 <h3 class="font-serif font-semibold text-xl mb-2">Serif</h3>
487 <p class="font-serif">Playfair Display adds elegance and authority to headings and decorative text.</p>
488 </div>
489 <div class="bg-gray-light p-4 rounded">
490 <h3 class="font-mono font-semibold text-xl mb-2">Monospace</h3>
491 <p class="font-mono">JetBrains Mono is perfect for code blocks and technical content.</p>
492 </div>
493 </div>
494 </section>
495
496 <!-- Text Effects -->
497 <section class="section">
498 <h2 class="text-3xl font-serif font-bold text-gray-800 mb-4">✨ Text Effects</h2>
499
500 <div class="grid grid-2 text-center">
501 <div class="p-4">
502 <h3 class="text-2xl font-bold text-gradient mb-2">Gradient Text</h3>
503 <p class="text-sm text-gray-600">Using background-clip: text</p>
504 </div>
505 <div class="p-4">
506 <h3 class="text-2xl font-bold text-shadow mb-2">Text Shadow</h3>
507 <p class="text-sm text-gray-600">Classic drop shadow effect</p>
508 </div>
509 <div class="p-4">
510 <h3 class="text-2xl text-glow mb-2">Text Glow</h3>
511 <p class="text-sm text-gray-600">Subtle glow using text-shadow</p>
512 </div>
513 <div class="p-4">
514 <h3 class="text-2xl text-3d mb-2">3D Text</h3>
515 <p class="text-sm text-gray-600">Multiple shadow layers</p>
516 </div>
517 </div>
518 </section>
519
520 <!-- Advanced Text Layouts -->
521 <section class="section">
522 <h2 class="text-3xl font-serif font-bold text-gray-800 mb-4">📖 Advanced Text Layouts</h2>
523
524 <div class="mb-4">
525 <h3 class="text-xl font-semibold mb-2">Drop Cap</h3>
526 <p class="drop-cap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. The first letter of this paragraph is styled as a drop cap using the ::first-letter pseudo-element. This creates an elegant magazine-style effect that draws attention to the beginning of important content sections.</p>
527 </div>
528
529 <div class="pull-quote">
530 "Good typography is invisible. Great typography is unforgettable."
531 </div>
532
533 <div class="highlight-box">
534 <h4 class="font-semibold text-primary mb-2">Pro Tip</h4>
535 <p class="mb-0">Use CSS custom properties (variables) to maintain consistency across your color and typography systems. This makes theme changes and maintenance much easier.</p>
536 </div>
537 </section>
538
539 <!-- Responsive Typography -->
540 <section class="section">
541 <h2 class="text-3xl font-serif font-bold text-gray-800 mb-4">📱 Responsive Typography</h2>
542 <p class="text-lg mb-4">This heading uses <code>clamp()</code> function for fluid scaling:</p>
543
544 <h3 style="font-size: clamp(1.5rem, 4vw, 3rem);" class="font-serif font-bold text-primary text-center mb-4">
545 Fluid Typography
546 </h3>
547
548 <p class="text-gray-600">The heading above scales smoothly from 24px to 48px based on viewport width, providing optimal readability across all devices.</p>
549 </section>
550
551 <!-- Color Accessibility -->
552 <section class="section">
553 <h2 class="text-3xl font-serif font-bold text-gray-800 mb-4">♿ Color Accessibility</h2>
554 <p class="text-lg mb-4">All color combinations in this design system meet WCAG AA accessibility standards:</p>
555
556 <div class="grid grid-2">
557 <div class="bg-primary text-white p-4 rounded">
558 <h4 class="font-semibold">Primary on White</h4>
559 <p class="mb-0">Contrast ratio: 4.5:1 ✓</p>
560 </div>
561 <div class="bg-white border-2 border-gray-200 text-gray-800 p-4 rounded">
562 <h4 class="font-semibold">Dark Gray on White</h4>
563 <p class="mb-0">Contrast ratio: 7.2:1 ✓</p>
564 </div>
565 </div>
566 </section>
567
568 <!-- Footer -->
569 <footer class="section bg-gray-800" style="color: white;">
570 <div class="text-center">
571 <h3 class="text-2xl font-serif font-bold mb-4">🎉 Typography & Color Mastery!</h3>
572 <p class="text-lg opacity-90 mb-4">You've mastered CSS colors and typography fundamentals!</p>
573 <div class="grid grid-4 text-sm">
574 <div>✅ Color Systems</div>
575 <div>✅ Typography Scale</div>
576 <div>✅ Web Fonts</div>
577 <div>✅ Text Effects</div>
578 </div>
579 </div>
580 </footer>
581 </div>
582</body>
583</html>This comprehensive demonstration showcases all aspects of CSS Colors & Typography covered in Lesson 3:
🎨 Complete Color System Implementation:
1. CSS Custom Properties (Variables):
2. Color Systems Demonstrated:
3. Color Applications:
📝 Professional Typography System:
1. Font Loading Strategy:
2. Typography Scale:
3. Font Families Implementation:
4. Advanced Typography Features:
✨ Advanced Text Styling:
1. Text Effects:
2. Advanced Layout Techniques:
3. Text Properties Mastery:
♿ Accessibility Considerations:
1. Color Contrast:
2. Typography Accessibility:
📱 Responsive Design:
1. Fluid Typography:
2. Layout Adaptability:
🚀 Modern CSS Features:
1. Custom Properties:
2. Advanced Selectors:
3. Performance Optimizations:
This showcase demonstrates real-world application of color theory and typography principles, providing a solid foundation for creating professional, accessible, and maintainable web designs. Every technique shown can be directly applied to production websites.
Excellent work mastering CSS colors and typography! You now have the skills to create visually stunning and accessible designs. Next, we'll dive into the "Box Model & Spacing" where you'll learn how CSS calculates element dimensions, master margins and padding, and create precise layouts with perfect spacing. Get ready to understand the foundation of all CSS layout!
Your progress is saved in this browser, on this device only.