Skip to content

CSS

Learn CSS — the language that controls how web pages look, from colors and fonts to layout.

What you'll learn

  • What CSS is and how it styles HTML
  • How selectors target elements to style
  • The box model — margin, border, padding, content
  • How to use Flexbox for layout

Concept

CSS

CSS (Cascading Style Sheets) is the language that controls the appearance of a web page. HTML provides the structure; CSS decides how that structure looks — colors, fonts, spacing, layout, animations.

Selectors

A selector picks which HTML elements to style. A declaration block lists the properties and values:

h1 {
  color: #2563eb;
  font-size: 2rem;
}

.button {
  background: blue;
  padding: 10px 20px;
}
  • h1 — element selector (all <h1> tags).
  • .button — class selector (elements with class="button").
  • #nav — id selector (the element with id="nav").

The Box Model

Every element is a rectangular box with four layers:

  1. Content — the text or image itself.
  2. Padding — space inside the border, around the content.
  3. Border — the edge of the box.
  4. Margin — space outside the border, pushing other elements away.

Understanding the box model is essential for spacing. When elements look "squished" or misaligned, the box model is usually why.

Flexbox

Flexbox is the modern way to arrange elements in a row or column. Apply display: flex to a container and its children become flex items you can align and distribute:

.container {
  display: flex;
  justify-content: center;  /* horizontal centering */
  align-items: center;      /* vertical centering */
  gap: 16px;                /* space between items */
}

Flexbox replaced the old float-based layouts. It is the first layout tool every web developer should learn.

The Cascade

"Cascading" means multiple rules can apply to the same element. When conflicts arise, CSS resolves them by specificity (how precise the selector is) and source order (later rules win ties). This is why your styles sometimes do not apply — a more specific rule elsewhere is overriding them.

Example

              /* A card component styled with the box model and flexbox */
.card {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;          /* space inside */
  margin: 16px 0;         /* space outside */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.card-title {
  color: #2563eb;
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;              /* remove default margin */
}

The card uses padding for internal space and margin for external separation. The header uses flexbox to push its title and action to opposite ends.

Try it

  • SVG Optimizer

    SVGs are styled with CSS. Optimize one and inspect the CSS attributes inside.

  • Image Color Picker

    Pick colors from an image to use in your CSS — get exact hex values.

Common mistakes

The mistake

Using inline styles (style='...') instead of classes.

The fix

Keep styles in a .css file with class selectors. Inline styles are hard to maintain, cannot be cached, and override your stylesheet in confusing ways.

The mistake

Confusing margin (space outside) with padding (space inside).

The fix

Padding adds space inside the border, growing the element's clickable area. Margin adds space outside, pushing neighbors away. Use padding for tap targets, margin for separation.

Related Resources

Related Snippets

Related Cheatsheets

  • CSS Cheatsheet

    Complete reference for properties, selectors, and flexbox.

Practice CSS

1 exercise

Practice CSS

Look up unfamiliar terms

A beginner-friendly glossary explains jargon in plain English — variables, functions, DOM, Promise, and more.

View glossary

Build real projects

Apply what you learned by building guided projects with starter code and solutions.

View projects

Decode error messages

Plain-English explanations of common errors — what they mean, why they happen, and how to fix them.

View errors