1. Specifying Color in CSS
CSS accepts color in several formats. Hex codes and named colors are the most common for beginners:
/* Named color */ color: navy; /* Hex code — a # followed by 6 characters */ background-color: #AFE1AF; /* RGB — red, green, blue values from 0–255 */ border-color: rgb(110, 154, 110); /* HSL — hue (0-360°), saturation, lightness — easiest to reason about */ color: hsl(120, 30%, 50%);
Use a free tool like coolors.co or the color picker in VS Code to find hex codes.
2. Building a Simple Color Palette
A well-designed site typically uses 3–4 colors maximum:
- Primary color — Your main brand color. Used for headings, key UI elements, and accents.
- Neutral colors — Whites, light grays, and dark grays for backgrounds and body text. These make up most of the page.
- Accent color — A contrasting color used sparingly for buttons and calls to action.
Define your colors as CSS custom properties (variables) at the top of your stylesheet so you only need to change them in one place:
:root {
--primary: #2c5f2e;
--accent: #AFE1AF;
--text: #24292f;
--bg: #ffffff;
}
3. Color Contrast & Readability
The biggest color mistake beginners make: light text on a light background, or dark text on a dark background. Always ensure strong contrast between text and its background.
- The WCAG standard requires a minimum 4.5:1 contrast ratio for normal text.
- Use the free WebAIM Contrast Checker (webaim.org/resources/contrastchecker) to test any color pair.
- Never use color alone to convey meaning — some users cannot distinguish red from green.
4. Choosing Web Fonts
Not every font on your computer is available in a browser. Use a web font service so the font loads for every visitor.
- Google Fonts (fonts.google.com) — Free, massive selection. Copy the provided
<link>tag into your<head>. - Always list a fallback font stack in case the web font fails to load:
body {
font-family: 'Lato', Arial, sans-serif;
/* ↑ web font ↑ system fallback ↑ generic family */
}
The generic families (serif, sans-serif, monospace) are your last resort — every device has a default for each.
5. Typography Rules for the Web
| Property | Recommended Range | Why |
|---|---|---|
font-size (body) | 16px – 18px | Comfortable reading on all screens |
line-height | 1.4 – 1.7 | Prevents lines from feeling cramped |
| Max line length | 60 – 75 characters | Longer lines are tiring to read |
| Typefaces per page | 2 maximum | More looks chaotic; one for headings, one for body |
Control line length with max-width on your text containers. A value of 65ch limits a block to roughly 65 characters wide — a classic typographic sweet spot.