🎨

CSS Fundamentals

Level
8 lessons31 exercises~6h

Learn CSS from scratch with 31 hands-on exercises and a live preview editor. Selectors, colors and units, the box model, typography, display and positioning, flexbox, backgrounds and borders, transitions, all runnable in your browser with instant visual feedback.

01. Selectors & Syntax

How a CSS rule is built and how to target elements.

The anatomy of a CSS rule

Every CSS rule has a selector and a declaration block. Inside the block you write property: value; pairs.

selector {
  property: value;
}

The core selectors

  • Type: p targets every paragraph.
  • Class: .badge targets elements with class="badge". Reusable.
  • ID: #title targets the single element with id="title". Unique.
  • Grouping: h1, h2 applies the same rule to several selectors.
  • Descendant: nav a targets links inside a nav.

Specificity in one line

When rules conflict, an ID beats a class, and a class beats a type selector. Keep selectors as simple as the job allows.

Resources

📖 MDN: CSS selectors 📖 MDN: Specificity 🔧 CSS Diner: selector game

Exercises (4)

Type selector

●●●

Select every <p> element and set its color to red.

CSS
Previewlive

Frequently Asked Questions

Do I need prior CSS experience to take this course?

No. The course starts from the anatomy of a CSS rule and builds up step by step to flexbox layouts and hover transitions. A basic understanding of HTML structure is helpful but not strictly required.

Can I run the exercises without installing anything?

Yes. Every exercise uses a dedicated CSS playground with a live HTML preview. You write CSS and see the result update instantly in the browser. There is nothing to install.

How long does the course take?

About 6 hours at a comfortable pace across 8 lessons and 31 exercises of increasing difficulty. You can work at your own speed and revisit any exercise at any time.

Is this course really free?

Yes, completely free, with no sign-up, no paywall, no ads and no tracking. CodeHelper is an open educational resource supported by the community.

Related

courseJavaScript Fundamentals74 hands-on exercises to learn JavaScript from scratch. Variables, math, arrays, objects, classes, DOM manipulation, async programming and REST APIs, all runnable in your browser.courseHTML FundamentalsLearn HTML from scratch with 30 hands-on exercises and a live preview editor. Document structure, text, lists, links and images, tables, forms, semantic HTML and accessibility, all runnable in your brtoolClamp GeneratorGenerate responsive font-size clamp() CSS.toolViewport Unit ConverterConvert between px and viewport units (vw, vh, vmin, vmax, dvh, svh, lvh, container query units). Includes batch conversion and fluid clamp() generator.

Free forever, no ads, no tracking. Support the project