CSS Tutorial for Beginners — Layout, Selectors, and Responsive Design

Cascading Style Sheets (CSS) tell browsers how HTML should look: typography, spacing, color, layout, and motion. You do not need to memorize every property on day one. A solid tutorial path covers how selectors target elements, how the cascade resolves conflicts, and how modern layout (Flexbox and Grid) replaces float hacks.

This guide walks through those foundations with small examples you can paste into any HTML file. Open the page in your browser, change values, and watch what breaks—that feedback loop is how most developers actually learn CSS.

Your first stylesheet

Link a stylesheet from HTML:

<link rel="stylesheet" href="styles.css" />

In styles.css:

body {
  font-family: system-ui, sans-serif;
  line-height: 1.5;
  margin: 0;
  color: #1a1a1a;
}

The body selector matches one element. Properties inside { } are declarations: property: value;.

Selectors: how rules find elements

Specificity decides which rule wins when two declarations conflict. Inline styles beat IDs; IDs beat classes; classes beat elements. When specificity ties, the last rule in the file wins. Use classes for reusable styling instead of sprinkling inline styles in HTML.

The box model

Every element is a rectangle with:

• Content — text or child elements
• Padding — space inside the border
• Border
• Margin — space outside the border

.card {
  width: 320px;
  padding: 1rem;
  border: 1px solid #e2e8f0;
  margin: 1rem auto;
  box-sizing: border-box;
}

box-sizing: border-box includes padding and border in width, which makes responsive layouts far less frustrating. Many teams apply it globally:

*, *::before, *::after {
  box-sizing: border-box;
}

Typography and readable pages

Readable body text usually means:

• 16px or larger base font size on screens
• Line height around 1.4–1.6 for paragraphs
• Limited line length (roughly 60–75 characters) for articles

article {
  max-width: 65ch;
  margin: 0 auto;
  padding: 1.5rem;
}

h1, h2, h3 {
  line-height: 1.2;
  margin-top: 2rem;
}

Use rem for spacing and type so everything scales with the root font size. em is relative to the current element’s font size—handy inside components, easy to misuse nested three levels deep.

Colors and contrast

Prefer hex (#2563eb), rgb (rgb(37 99 235)), or hsl (hsl(220 90% 56%)) consistently. Check contrast for text against backgrounds; WCAG AA requires roughly 4.5:1 for normal text. Tools like browser devtools or online contrast checkers catch issues early.

Flexbox: one-dimensional layouts

Flexbox distributes space along a single axis—a row of buttons, a navbar, vertically centered content.

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
}

Key properties:

• display: flex on the parent
• flex-direction: row | column
• justify-content — main axis alignment
• align-items — cross axis alignment
• gap — space between children without margin hacks

Flex children can grow with flex: 1 to fill remaining space—common for sidebars next to main content.

Grid: two-dimensional layouts

CSS Grid defines rows and columns on a parent. Ideal for page shells, card galleries, and dashboards.

.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

repeat(auto-fill, minmax(...)) builds responsive grids without media queries for every breakpoint—still add queries when behavior must change, not just column count.

Responsive design

Mobile-first CSS starts with base styles for small screens, then adds rules inside media queries:

.sidebar {
  display: none;
}

@media (min-width: 768px) {
  .sidebar {
    display: block;
  }
}

Use relative units (%, fr, vw with care) and max-width on images:

img {
  max-width: 100%;
  height: auto;
}

Variables and maintainability

Custom properties (CSS variables) centralize tokens:

:root {
  --color-text: #0f172a;
  --color-accent: #0ea5e9;
  --space-md: 1rem;
}

.button-primary {
  background: var(--color-accent);
  padding: var(--space-md) calc(var(--space-md) * 1.5);
  color: white;
  border: none;
  border-radius: 6px;
}

Swap themes by changing :root or a data-theme attribute on <html>.

Transitions and motion (use lightly)

.button-primary {
  transition: background-color 150ms ease;
}

.button-primary:hover {
  background-color: #0284c7;
}

Respect prefers-reduced-motion for users who disable animations:

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Debugging tips

• DevTools Styles panel shows which rules apply and which are crossed out.
• Flexbox and Grid overlays visualize tracks and gaps.
• When layout “mysteriously” breaks, check for collapsing margins, missing box-sizing, or a child with fixed width larger than the viewport.

Positioning and stacking (when you need it)

Most layouts should stay in normal document flow. Reach for position when you truly need overlays:

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

z-index only competes within the same stacking context. If a dropdown hides behind a header, check whether a parent created a new context with transform, filter, or opacity below 1.

Container queries (component-aware responsiveness)

Media queries react to viewport width. Container queries react to a parent’s size—useful for cards reused in a sidebar and a full-width grid:

.card-wrap {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 120px 1fr;
  }
}

Support is broad in current browsers; provide a sensible default layout when @container is not available.

Small practice project

Build a three-part page: header with logo and nav (flex), main article (max-width in ch), and a responsive card grid in a “Related” section. Requirements:

1. No layout tables.
2. One breakpoint where the sidebar stacks above content.
3. Focus styles visible on keyboard tab (:focus-visible).

FAQ

Should I learn Flexbox or Grid first?
Flexbox first for components; Grid for page-level structure. Most sites use both.

Is CSS a programming language?
It is declarative styling with growing logic (custom properties, calc(), container queries). Frameworks like Tailwind compile to CSS; fundamentals still matter when debugging.

Why do my styles not apply?
Wrong selector, higher specificity elsewhere, or a typo in the property name. DevTools shows computed styles and the winning rule.

Do I need a preprocessor?
Sass and PostCSS remain popular in large codebases, but modern CSS (nesting in browsers, variables) covers many old pain points. Learn plain CSS before abstractions.

---

CSS rewards patience more than brilliance. Master selectors, the box model, Flexbox, Grid, and one responsive pattern—and you can implement most marketing pages and app shells. From there, depth comes from real projects: forms, tables, dark mode, and accessibility audits on production traffic.