Lesson 5: Colors, Fonts & Text
Typography and color are the two most powerful tools in web design. The right font and colors can make a page feel trustworthy, exciting, playful, or professional.
Key Concepts
CSS Colors
Colors can be named (red, blue, green), hex codes (#ff0000 = red), or RGB values (rgb(255,0,0)). Hex codes are most common in real projects. A hex color has 6 digits: 2 for red, 2 for green, 2 for blue.
Font Properties
font-family sets the typeface. font-size sets the size (px, rem, em). font-weight controls bold (100–900 or bold/normal). line-height controls spacing between lines — 1.6 is comfortable for reading.
Text Alignment and Decoration
text-align: center, left, right, or justify. text-decoration: none removes link underlines. text-transform: uppercase turns text to all caps without changing the HTML.
🆕 Live Editor
Edit the code — the preview updates live!