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">

Common Mistakes

Believing CSS is optional polish rather than a core part of how the web actually looks and works.
Mixing styling directly into HTML with inline styles everywhere instead of using a shared stylesheet.
Assuming a browser will show unstyled HTML exactly the same way every browser has its own default styling.

Chapter Summary

CSS stands for Cascading Style Sheets and controls how HTML content is visually presented.
Separating structure (HTML) from presentation (CSS) makes a site easier to maintain and restyle.
The cascade is the set of rules CSS uses to resolve conflicting styles from different sources.

Browser Support

CSS is supported by every browser in use today, though newer CSS features roll out at different speeds across browsers.

🔒

Chapter Quiz — Complete all 7 topics to unlock

0/7 topics done

Complete these topics first:

Next Lesson → CSS Syntax