SESSION 013 — CSS Basics

CONCEPTS.UNLOCKED

🎨

What CSS Is & How It Connects

The language that controls how HTML looks. Connected via <link rel="stylesheet" href="styles/main.css">. HTML = structure, CSS = presentation.

{ }

Syntax & Selectors

selector { property: value; } — target an element, set a property. Selectors: element (button), class (.tool-btn), id (#toolbar), combined (nav .tool-btn).

Colors & Typography

Colors: hex (#1a1a2e), rgb (rgb(26,26,46)), hsl, named. Typography: font-family, font-size, font-weight, line-height, color.

📦

The Box Model

Every element is a box: content → padding → border → margin. Padding is space inside the box. Margin is space outside. Borders and border-radius (rounded corners) define the edge.

🖼

Backgrounds & Borders

background-color, background-image. border (width, style, color), border-radius (rounded corners — 50% turns a square into a circle!).

✋

Pseudo-classes

:hover (mouse over), :active (clicking), :focus (selected via keyboard). Style interactive states — make buttons feel alive and responsive.

HANDS-ON.TASKS

Apply the Dark Theme

▶

Open src/styles/main.css and the app in the browser side-by-side:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #0a0a1a;
  color: #e0e0e0;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

The * selector targets every element. box-sizing: border-box makes width and height include padding and border — without it, a 100px box with 10px padding becomes 120px wide.

Style the Toolbar

▶

.toolbar {
  background-color: #1a1a2e;
  padding: 8px;
}

.tool-btn {
  background-color: #16213e;
  color: #e0e0e0;
  border: 1px solid #2a2a4a;
  border-radius: 6px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
}

.tool-btn:hover {
  background-color: #0f3460;
  border-color: #00b4d8;
}

.tool-btn:active {
  transform: scale(0.97);
}

Inspect the Box Model in DevTools

▶

Open DevTools → select a button → see the Box Model diagram (content/padding/border/margin):

Layer	Color in DevTools	What It Is
Content	Blue	The actual text/image inside
Padding	Green	Space between content and border
Border	Yellow	The visible edge
Margin	Orange	Space outside the border

Experiment in DevTools

▶

In DevTools Styles panel, live-edit values. Change colors, adjust padding, try different fonts.

Try these experiments:

Experiment	What Happens
margin: -10px	Elements overlap — negative margins pull things closer
padding: 50%	Padding calculated as % of parent width — creates a square
border-radius: 50%	Turns any square element into a perfect circle!

DevTools is your CSS playground. Every change is instant and temporary — refresh to reset. Professional developers prototype in DevTools before writing code.

Style the Settings Panel

▶

Style the section headers, labels, and range inputs to match the dark theme:

.settings-panel {
  background-color: #1a1a2e;
  padding: 16px;
}

.settings-panel h2 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #a0a0b0;
  margin-bottom: 16px;
}

Close the Ticket

▶

git switch -c design/PIXELCRAFT-003-dark-theme
git add src/styles/main.css
git commit -m "Apply dark theme and button styles (PIXELCRAFT-003)"
git push origin design/PIXELCRAFT-003-dark-theme
# PR → Review → Merge → Close ticket ✅

CS.DEEP-DIVE

Declarative vs imperative programming.

CSS is declarative: you say "make this blue" and the browser figures out HOW (which pixels to change, when to repaint). JavaScript is imperative: you say "step 1, step 2, step 3."

// Declarative: say WHAT you want

CSS  → "make this blue"
SQL  → "give me all users over 18"

// Imperative: say HOW to do it

JS   → "step 1: find element.
       step 2: set color property.
       step 3: trigger repaint."

// The distinction matters because declarative
// languages let you focus on WHAT you want,
// while the system optimizes the HOW.
// Different problems favor different paradigms.

REF.MATERIAL

ARTICLE

CSS First Steps — MDN

Mozilla Developer Network

The gold-standard CSS introduction: syntax, selectors, properties, the cascade. Start here.

CSSMDNBEGINNER

VIDEO

Learn CSS in 20 Minutes

Web Dev Simplified

Rapid introduction covering selectors, the box model, colors, typography, and pseudo-classes.

CSSQUICK

VIDEO

CSS Box Model Explained — Kevin Powell

Kevin Powell

The box model demystified: content, padding, border, margin, and why box-sizing: border-box is essential.

BOX MODELFUNDAMENTALS

TOOL

CSS Gradient Generator

cssgradient.io

Visual tool for creating CSS gradients. Useful for backgrounds and button effects.

GRADIENTSVISUAL TOOL

TOOL

Coolors — Color Palette Generator

Coolors

Generate harmonious color palettes. Press spacebar for random palettes. Essential for any design work.

COLORSDESIGN

LOOKS LIKE 1996