Interactive Study Module

CSS Introduction & Selectors

By Håkon Wium Lie

5 min read

Verified Curriculum

Step 1: What is CSS?

Styling, Colors, Typography and Responsive Layouts

CSS stands for Cascading Style Sheets. It describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a tremendous amount of work by allowing you to control the layout of multiple web pages all at once.

Analogy: If HTML is a blank manuscript text, CSS is the art director who chooses fonts, spacing, margins, glossy cover textures, and colorful illustrations.

Step 2: Interactive Syntax Anatomy

CSS Rule-Set Syntax Anatomy

h1{color: #059669;font-size: 24px;}

The selector points to the HTML element: e.g. h1 (tag), .btn (class), or #main (ID).
Each declaration includes a CSS property name and a value, separated by a colon (:).
Declarations must be separated by a semicolon (;).

Try It Yourself Sandbox

Edit code & run live

Centralized Compiler Sandbox

https://sandbox.bravion-edu.internal/live-preview

Interactive Browser DOM

Step 4: Active Recall Knowledge Check

+25 XP

Which CSS property is used to change the background color of an element?

background-color

color

bgcolor

canvas-color

Step 5: Remember This! (Memory Anchors)

CSS Key Memory Anchors

Rule 1: "Cascading" means styles cascade down from external stylesheets, internal <style>, to inline attributes.
Rule 2: Specificity order: Inline styles > ID selectors (#) > Class selectors (.) > Element tags.
Rule 3: The CSS Box Model consists of Content, Padding, Border, and Margin from inside out.

⚠️ Common Pitfall / Gotcha: Margin collapses vertically between adjacent elements, but horizontal margins never collapse!

Module Progress Checkpoint

Ready to verify your understanding?

Click below to mark this study unit completed and claim your +50 XP reward.