How to Style a Website with CSS: A Beginner Guide

Understand the box model

Every HTML element is a box. The box model has four layers: content, padding, border, and margin. Content is the text or image inside. Padding adds space inside the border. Border wraps the padding. Margin adds space outside the border.

Set box-sizing: border-box on all elements so padding and border are included in the element's total width and height. This prevents unexpected layout shifts when you add padding or a border to a div, card, or button.

* { box-sizing: border-box; }

Use selectors that are specific but not fragile

A CSS selector targets an HTML element for styling. Element selectors like p or h2 are simple but broad. Class selectors like .card are more precise and reusable. ID selectors like #header are the most specific but harder to reuse.

Prefer classes for most styling. Use element selectors for global resets and typography defaults. Avoid deeply nested selectors like div > section > article > p because they break when the HTML structure changes.

.card { padding: 1rem; border: 1px solid #d9deea; border-radius: 8px; }
.card h2 { margin-top: 0; }

Set typography early

Define font family, size, line height, and color on the body element. These values cascade to child elements, so you do not need to repeat them everywhere. Use system fonts for fast loading and consistent rendering across devices.

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: #111827;
}

Use relative units like rem for font sizes and spacing so the layout scales with user preferences. Avoid setting fixed pixel sizes for body text because they do not adapt to different screens or accessibility settings.

Choose colors with purpose

Pick a small palette: one primary color, one neutral text color, one background color, and one accent for links or buttons. Keep contrast high enough for readable text. The Web Content Accessibility Guidelines recommend a contrast ratio of at least 4.5:1 for normal text.

Define colors as CSS custom properties so you can update them in one place:

:root {
  --blue: #2754d8;
  --ink: #111827;
  --muted: #5e6678;
  --soft: #f5f7fb;
}

Use the Color Blender to create intermediate shade steps, and the Color Picker to convert between HEX, RGB, and HSL values.

Spacing with margin and padding

Margin controls space outside an element. Padding controls space inside. Use consistent spacing values instead of arbitrary pixel numbers. A common pattern is a 4-point scale: 4px, 8px, 16px, 24px, 32px.

Avoid using margin on inline elements like spans and links because vertical margin does not apply predictably to inline layout. Switch the element to display: inline-block or display: block first.

.section { padding: 32px 0; }
.card + .card { margin-top: 16px; }

Layout with flexbox

Flexbox is the simplest way to align items in a row or column. Set display: flex on a container, then use gap for spacing between children, justify-content for horizontal alignment, and align-items for vertical alignment.

.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.grid > * { flex: 1 1 280px; }

For two-dimensional layouts with rows and columns, use CSS Grid. For simple navigation bars, card rows, and form layouts, flexbox is usually enough.

Add shadows and visual depth

Box shadows create hierarchy by showing which elements float above the page. Keep shadows subtle: low opacity, moderate blur, and a small vertical offset. Use the Box Shadow Generator to preview values before copying CSS.

Text shadows add emphasis to headings but can hurt readability if the blur is too large or the contrast is too low. Test text shadows at normal reading size and on both light and dark backgrounds.

Test with browser developer tools

Open your browser's developer tools and inspect any element to experiment with CSS live. Change colors, fonts, spacing, and layout in the Styles pane without editing files. This is the fastest way to learn what each property does.

Use the responsive mode to check how the design looks on phone, tablet, and desktop widths. Resize the viewport and watch for overflow, overlapping elements, or text that becomes too small to read.

Common beginner mistakes

• Using !important to fix specificity problems instead of rewriting selectors.
• Setting fixed widths on containers that should adapt to screen size.
• Ignoring the box model and getting unexpected spacing when adding padding or borders.
• Using too many font sizes and colors instead of a consistent scale.
• Not testing on mobile devices or small viewports.

Practical CSS checklist

1. Set box-sizing: border-box globally.
2. Define base typography on the body element.
3. Create a small color palette with CSS custom properties.
4. Use consistent spacing values (4px scale).
5. Build layouts with flexbox and gap.
6. Add subtle shadows for depth.
7. Test in browser dev tools before publishing.

Style with CSS using browser tools

Start with the box model, typography, and color palette. Use browser developer tools to experiment with live values before committing changes to a stylesheet. Flexbox and gap handle most beginner layout tasks without complex positioning.

ToolZone offers free browser generators for box shadow, clip-path, color blending, and color conversion so you can preview CSS values visually instead of guessing numbers.