Frontend Master

JavaScript Curriculum

Introducing CSS
+55 XP

Introducing CSS

easy
~30 min·55 XP

The coffee shop's HTML is solid but it looks like a 1995 government website. Time to add your first stylesheet and bring it to life with color, spacing, and typography.

Introducing CSS

HTML gives your page structure. CSS gives it style — color, spacing, typography, layout. Every visual decision on the web is made in CSS.

Anatomy of a CSS Rule

A CSS rule has three parts:

css
selector { property: value; }
  • Selector — which HTML element(s) to style
  • Property — what aspect to change (color, font-size, margin…)
  • Value — what to change it to

Multiple declarations go inside the same rule block:

css
p { color: #333; font-size: 16px; line-height: 1.6; }

Selectors — Targeting Elements

CSS has five selector types you'll use every day:

selectors.css
Syntax
p { }

Targets every instance of that HTML element on the page.

Example
p {
  color: #333;
  font-size: 16px;
}
What gets styled
✓<p>First paragraph</p>
✓<p>Second paragraph</p>
<h1>Not matched</h1>
💡Class selectors are your best friend
Use class selectors (.name) for most styling — they're reusable, have moderate specificity, and keep your CSS decoupled from your HTML structure. Use ID selectors sparingly (they have high specificity and must be unique). Use element selectors for base/reset styles only.

Properties and Values — Live Sandbox

CSS has hundreds of properties, but ~20 cover 80% of everyday styling. Try them here:

property-sandbox.css
Preview
The Grind Coffee
Generated CSS
.coffee-label {
  color: #adbac7;
  font-size: 16px;
  font-weight: 400;
  text-align: left;
}

Linking CSS to HTML

There are three ways to add CSS — and one clear winner:

linking-css.html
✅ Always use this for real projects
How to write it
<!-- In <head> -->
<link rel="stylesheet" href="styles.css">

<!-- styles.css -->
body {
  font-family: sans-serif;
  margin: 0;
}
Pros
  • +One file styles the whole site
  • +Browser caches it — fast repeat visits
  • +Clean separation of HTML and CSS
  • +Easy to maintain and share
Cons
  • −Extra HTTP request on first load
ℹ️The cascade in CSS
CSS stands for Cascading Style Sheets. "Cascading" means multiple rules can apply to the same element — the browser resolves conflicts using specificity (which selector is more specific wins) and order (later rules override earlier ones). We'll cover specificity in depth in Lesson 19.

Your Challenge

Create a styles.css file, link it to your HTML, and write CSS rules using element, class, and pseudo-class selectors to style the coffee shop page.

Challenge

Create a styles.css file and link it to your HTML. Write rules that: set a font-family on body, style h1 with a color and font-size, give p elements a line-height, style all nav a links to remove underline and change color on hover, and give .card elements a background and border-radius.

cssselectorpropertyvaluerulestylesheetlinkclassidpseudo-classspecificity
Introducing CSS | Nexus Learn