🎨 Lesson 9: Colors & Typography
Color Formats
CSS supports several ways to specify colors:
1. Named Colors
Use predefined color names:
color: red;
color: blue;
color: green;
color: orange;
color: yellowgreen;
red
blue
green
orange
2. Hexadecimal Color Codes (Hex)
Most popular method. Format: #RRGGBB where RR, GG, BB are hexadecimal (0-F):
color: #667eea; /* Purple */
color: #ff0000; /* Red */
color: #00ff00; /* Green */
color: #0000ff; /* Blue */
color: #ffffff; /* White */
color: #000000; /* Black */
#667eea
#ff0000
#00ff00
#ffa500
3. RGB (Red, Green, Blue)
Specify intensity of red, green, and blue (0-255):
color: rgb(102, 126, 234); /* Purple */
color: rgb(255, 0, 0); /* Red */
color: rgb(0, 255, 0); /* Green */
color: rgb(0, 0, 255); /* Blue */
4. RGBA (RGB with Alpha/Transparency)
RGB with alpha channel for transparency (0 = transparent, 1 = opaque):
color: rgba(102, 126, 234, 1); /* Fully opaque purple */
color: rgba(102, 126, 234, 0.5); /* Semi-transparent purple */
color: rgba(102, 126, 234, 0.2); /* Very transparent purple */
opacity: 1.0
opacity: 0.7
opacity: 0.4
Color Properties
/* Text color */
color: #667eea;
/* Background color */
background-color: #f0f0f0;
/* Border color */
border-color: #333;
/* Box shadow color */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
Typography (Fonts)
Typography controls how text looks. Key properties:
font-family
Specify which font to use. Always provide fallback fonts:
/* Single font */
font-family: Arial;
/* Multiple fonts with fallback */
font-family: "Arial", sans-serif;
font-family: "Times New Roman", serif;
font-family: "Courier New", monospace;
/* Multiple font options */
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
Font Categories
- Serif: Has small lines at ends (formal, traditional) - Times New Roman, Georgia
- Sans-serif: No lines at ends (modern, clean) - Arial, Verdana, Helvetica
- Monospace: Fixed-width (code, technical) - Courier New, Consolas
- Cursive: Handwriting-style - Brush Script MT, Lucida Handwriting
- Fantasy: Decorative - Impact, Comic Sans
Serif: The quick brown fox jumps over the lazy dog. (Georgia)
Sans-serif: The quick brown fox jumps over the lazy dog. (Arial)
Monospace: The quick brown fox jumps over the lazy dog. (Courier)
font-size
Control text size using different units:
/* Pixels - Fixed size */
font-size: 16px;
/* Em - Relative to parent */
font-size: 1.5em; /* 1.5 times parent size */
font-size: 0.9em; /* 90% of parent size */
/* Percent - Relative to parent */
font-size: 120%;
/* Rem - Relative to root */
font-size: 1.2rem;
Small text (12px)
Normal text (16px)
Larger text (20px)
Even larger text (24px)
font-weight
Control text thickness (boldness):
font-weight: normal; /* Default */
font-weight: bold; /* Bold */
font-weight: 400; /* Normal (numeric) */
font-weight: 700; /* Bold (numeric) */
font-weight: lighter; /* Lighter than parent */
font-weight: bolder; /* Bolder than parent */
Light text (300)
Normal text (400)
Bold text (700)
Very bold text (900)
line-height
Space between text lines. Affects readability:
line-height: 1; /* Tight spacing */
line-height: 1.5; /* Normal (recommended) */
line-height: 2; /* Loose spacing */
line-height: 15px; /* Fixed pixel height */
Tight line height. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Normal line height. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Loose line height. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
text-align
Horizontal alignment of text:
Left aligned text
Center aligned text
Right aligned text
Justified text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
text-decoration
Add lines or styling to text:
text-decoration: none; /* No decoration */
text-decoration: underline; /* Underline */
text-decoration: line-through; /* Strikethrough */
text-decoration: overline; /* Line above text */
No decoration
Underlined text
Strikethrough text
Overline text
letter-spacing & word-spacing
Control space between letters and words:
Text with increased letter spacing
Text with increased word spacing
Text with decreased word spacing
text-transform
Transform text case:
text-transform: uppercase; /* UPPERCASE */
text-transform: lowercase; /* lowercase */
text-transform: capitalize; /* Capitalize Each Word */
text-transform: none; /* No transformation */
this text will be uppercase
THIS TEXT WILL BE LOWERCASE
this text will be capitalized
Complete Typography Example
body {
font-family: "Segoe UI", Tahoma, Geneva, sans-serif;
font-size: 16px;
line-height: 1.6;
color: #333;
}
h1 {
font-size: 32px;
font-weight: bold;
color: #667eea;
margin-bottom: 20px;
}
p {
margin-bottom: 15px;
text-align: justify;
}
a {
color: #667eea;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
Key Takeaways
- Use hex (#667eea) or RGB for precise colors
- RGBA allows transparency with the alpha channel
- Always provide fallback fonts (serialize font-family)
- Use appropriate font sizes for readability (16px minimum for body)
- Set line-height to 1.5-1.6 for good readability
- Use font-weight, text-align, and text-decoration for styling