CSS Basics

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

CSSselectorsspecificitycascade

Duration

⏱ About 1 hour

Level

📊 Beginner

Prerequisite

🎯 Lessons 1–2

OUTCOME

Read any stylesheet and predict which rules apply

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

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; })

Example code / lecture materials

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

View on GitHub ↗