← Back to the Build Your Homepage series

🎨

EPISODE 01

Three ways to apply · selectors · specificity · color systems · web fonts · line-height · content · padding · border · margin · box-sizing · background-image · gradients · box-shadow

CSS Basics · Color & Typography · The Box Model · Backgrounds, Borders, Shadows

Get the fundamentals right: how CSS attaches to HTML, the main selectors, and how specificity decides which rule wins when several match. Pick colors with intent and set typography that actually reads well. Learn HSL/OKLCH, web fonts, and the rhythm of line-height and letter-spacing. Every element is a box made of four layers. Master padding vs margin, box-sizing: border-box, and how negative margins behave. Add depth and personality with backgrounds, gradients, and shadows. Use the right tool — performance and aesthetics depend on the choice.

CSSselectorsspecificitycascadecolorfonttypographyGoogle Fontsbox modelpaddingmarginborderbox-sizingbackgroundgradientshadow

Duration

⏱ About 1 hour + About 1.5 hours + About 1 hour + About 1 hour

Level

📊 Beginner

Prerequisite

🎯 Lessons 1–2

OUTCOME

Read any stylesheet and predict which rules apply / Page typography that is comfortable to read and consistent across browsers / Predict any element's outer dimensions / Style hero sections and cards with confidence

What you'll learn

1Choose between inline, internal, and external CSS
2Use type, class, ID, attribute, and descendant selectors
3Predict specificity outcomes
4Use the cascade rather than fight it
5Use hex, rgb, hsl, and oklch color formats
6Load custom fonts via Google Fonts or @font-face
7Set sensible line-height for body text (1.5–1.7)
8Use variable fonts for finer weight control
9Distinguish content, padding, border, and margin
10Use box-sizing: border-box correctly
11Recognize margin collapse and how to prevent it
12Apply border-radius and outline appropriately
13Set background-color and background-image
14Create linear and radial gradients
15Combine multiple backgrounds in one rule
16Apply box-shadow and text-shadow tastefully

CSS Basics

Get the fundamentals right: how CSS attaches to HTML, the main selectors, and how specificity decides which rule wins when several match.

1. Three Ways to Apply CSS

html

<!-- 1. Inline (avoid in real code) -->
<h1 style="color: blue">Hi</h1>

<!-- 2. Internal -->
<style>
  h1 { color: blue; }
</style>

<!-- 3. External (recommended) -->
<link rel="stylesheet" href="style.css">

2. Selectors

Selector	Matches
h1	All <h1> elements
.note	class="note"
#hero	id="hero"
[type="email"]	<input type="email">
nav a	<a> inside <nav> (descendant)
ul > li	<li> directly inside <ul> (child)
h2 + p	<p> immediately after <h2> (adjacent)
a:hover	Link being hovered (pseudo-class)

3. Specificity

When multiple rules match, the more specific one wins. Specificity counts as (inline, IDs, classes/attrs/pseudo, types).

Selector	Specificity
p	(0,0,0,1)
.btn	(0,0,1,0)
#header	(0,1,0,0)
style="..."	(1,0,0,0)
nav a:hover	(0,0,1,2)

⚠️

Avoid !important; it overrides specificity and becomes hard to undo. Reach for it only as a last resort.

4. The Cascade & Inheritance

Cascade: later rules override earlier rules of equal specificity
Inheritance: text-related properties (color, font) inherit from parent; layout properties do not
Reset with a basic reset (* { box-sizing: border-box; margin: 0; })

Color & Typography

Pick colors with intent and set typography that actually reads well. Learn HSL/OKLCH, web fonts, and the rhythm of line-height and letter-spacing.

1. Color Formats

css

h1 { color: #2563eb; }            /* hex */
h2 { color: rgb(37, 99, 235); }   /* rgb */
h3 { color: hsl(217, 91%, 53%); } /* hue, saturation, lightness */
h4 { color: oklch(0.6 0.2 250); } /* modern, perceptually uniform */
footer { color: rgba(0,0,0,0.5); }

Prefer hsl/oklch when you want to derive related shades (lighten, darken) — the math is intuitive.

2. Web Fonts (Google Fonts)

html

<!-- in <head> -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

css

body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #1f2937;
}

3. Typography Properties

Property	Description
font-size	Use rem for accessibility (1rem = root font size)
font-weight	100–900 or keywords (normal=400, bold=700)
line-height	Unitless 1.5–1.7 for body text
letter-spacing	Tighten or open up tracking
text-align	left \| center \| right \| justify
text-transform	uppercase \| capitalize \| lowercase

4. CSS Custom Properties for Color Tokens

css

:root {
  --color-text: #1f2937;
  --color-accent: #2563eb;
  --color-bg: #ffffff;
}
body { color: var(--color-text); background: var(--color-bg); }
a { color: var(--color-accent); }

💡

Custom properties shine for dark mode: define a different :root for [data-theme="dark"] and you swap entire palettes instantly.

The Box Model

Every element is a box made of four layers. Master padding vs margin, box-sizing: border-box, and how negative margins behave.

1. The Four Layers

text

┌─ margin (outside, transparent) ──────────────┐
│  ┌─ border ───────────────────────────────┐  │
│  │  ┌─ padding (inside, takes bg) ─────┐  │  │
│  │  │       content (text/images)      │  │  │
│  │  └──────────────────────────────────┘  │  │
│  └────────────────────────────────────────┘  │
└──────────────────────────────────────────────┘

padding — space inside the border, shares the background
border — the visible edge
margin — space between this element and others, transparent

2. box-sizing: border-box

css

* { box-sizing: border-box; }    /* start every project with this */

.card {
  width: 300px;
  padding: 20px;
  border: 1px solid #e5e7eb;
}
/* width: 300px now INCLUDES padding + border, not just content */

⚠️

Without border-box, .card above is actually 342px wide (300 + 20*2 + 1*2). That mismatch is the #1 source of layout bugs.

3. Margin Collapse

Adjacent vertical margins collapse into the larger one. Two paragraphs with margin: 16px end up with 16px between them, not 32px.

Prevent collapse with padding instead of margin
Or wrap content in an element with overflow: auto
Flex/Grid children do not collapse — another reason to use them

4. border-radius and outline

css

.avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;        /* perfect circle */
}
.btn:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;        /* outline does NOT affect layout */
}

Backgrounds, Borders, Shadows

Add depth and personality with backgrounds, gradients, and shadows. Use the right tool — performance and aesthetics depend on the choice.

1. Backgrounds

css

.hero {
  background-color: #1e293b;
  background-image: url("hero.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Shorthand: */
  background: #1e293b url("hero.jpg") center/cover no-repeat;
}

2. Gradients

css

.btn {
  background: linear-gradient(135deg, #6366f1, #ec4899);
}
.radial {
  background: radial-gradient(circle at top right, #fbbf24, transparent);
}
.multi {
  /* layers from front to back */
  background:
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url("banner.jpg") center/cover;
}

3. Shadows

css

.card {
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06);
}
.card:hover {
  box-shadow: 0 4px 6px rgba(0,0,0,0.10), 0 12px 24px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}
h1 { text-shadow: 0 1px 2px rgba(0,0,0,0.2); }

💡

Stack two shadows — a tight one for the edge and a wide one for the glow — for that polished UI look.

4. Borders

css

.divider     { border-bottom: 1px solid #e5e7eb; }
.dashed      { border: 2px dashed #94a3b8; }
.gradient-border {
  border: 2px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #6366f1, #ec4899) border-box;
}

Example code / lecture materials

All lecture materials and example code are openly available on GitHub.

View on GitHub ↗

Comments 0

No comments yet. Be the first.

Only members can comment.

Comments with ads, abuse, personal information or illegal content are hidden or removed. Comments are shown with your nickname. Privacy Policy