CSS Introduction

Picture a house with the walls up, the rooms laid out, everything structurally sound but completely bare: no paint, no furniture, no personality. That's what an HTML page looks like without CSS. HTML gives a page its structure and content, and CSS is what decorates that structure, choosing the colors, fonts, spacing, and layout that make a page actually pleasant to look at. CSS stands for Cascading Style Sheets. The cascading part means that styles can come from multiple places at once (the browser's defaults, an external stylesheet, even inline on a single element) and CSS has a predictable set of rules for deciding which style wins when they conflict. Once you separate structure (HTML) from presentation (CSS), you can restyle an entire site like cookiescursor.com by editing one stylesheet, instead of touching every single page.

In this page:

What Is CSS?
Why CSS Matters
How Browsers Use CSS
CSS and HTML Working Together
Where CSS Code Can Live

What Is CSS?

CSS is the language that describes how HTML elements should look: their color, size, spacing, fonts, and position on the page. HTML says what something is (a heading, a paragraph, a button); CSS says how it should appear.

Note: Think of HTML as the skeleton of a page and CSS as everything about its appearance layered on top.

Warning: Without any CSS, a page still works, it just uses the browser's plain default styling, which usually looks quite basic.

Example: What Is CSS?

css

<style>
p {
  color: teal;
  font-size: 18px;
}
</style>
<p>HTML says this is a paragraph; CSS says how it looks.</p>

Why CSS Matters

CSS is what turns a working webpage into a pleasant, readable, on-brand experience. Good CSS improves readability, guides a visitor's attention, and makes a site feel trustworthy and professional.

Note: Even small CSS touches, like consistent spacing and a readable font size, make a huge difference in how polished a page feels.

Warning: A page can be functionally complete but still feel broken or untrustworthy to visitors if its CSS is inconsistent or missing.

Example: Why CSS Matters

css

<style>
.card {
  padding: 16px;
  font-size: 16px;
  color: #222;
  background: lightyellow;
  border: 1px solid #ddd;
}
</style>
<div class="card">Consistent spacing and readable text feel polished.</div>

How Browsers Use CSS

When a browser loads a page, it reads the HTML to build the page's structure, then reads any CSS to figure out how each piece of that structure should be drawn on screen, a process often called rendering.

Note: Browsers apply their own default styles first, then layer your CSS on top, so you're always starting from some baseline appearance.

Warning: Different browsers can have slightly different default styles, which is one reason a page can look subtly different across browsers before you write any CSS at all.

Example: How Browsers Use CSS

css

<style>
p {
  color: navy;
}
</style>
<p>The browser reads this HTML, then applies this CSS rule while rendering.</p>

CSS and HTML Working Together

HTML and CSS are two separate languages that work as a team: HTML elements act as the targets that CSS selectors point at, and CSS rules describe how those targeted elements should look.

Note: Keep your HTML focused on meaning and structure, and let CSS handle all the visual decisions, it keeps both languages easier to maintain.

Warning: If your CSS selector doesn't match any HTML element on the page, the rule simply does nothing, with no error or warning shown.

Example: CSS and HTML Working Together

css

<style>
.headline {
  color: darkred;
}
</style>
<h1 class="headline">CSS targets this element by its class</h1>

Where CSS Code Can Live

CSS can be written inline on a single element, inside a style tag in the page's head, or in a completely separate .css file linked to the page. Each approach has its place, and later chapters cover them in detail.

Note: For any real project, an external stylesheet is usually the best starting point since it can be reused across every page of a site.

Warning: Relying only on inline styles scattered across many elements quickly becomes hard to maintain as a site grows.

Example: Where CSS Code Can Live

css

<p style="color: red;">Inline CSS</p>
<style>
  p.internal { color: blue; }
</style>
<p class="internal">Internal CSS, inside a style tag</p>
<link rel="stylesheet" href="styles.css">

Chapter Quiz — Complete all 7 topics to unlock

0/7 topics done

Complete these topics first:

Next Lesson → CSS Syntax