What Is CSS and What Does It Do?

HTML gives a web page its structure. CSS gives it its appearance. These two languages do completely different jobs, and keeping them separate is one of the most important design decisions in web development.

The distinction that matters

HTML answers the question: what is this?

<h1>Summit Trail Outfitters</h1>
<p>Guided hiking in the Pacific Northwest.</p>
<nav>
  <a href="tours.html">Tours</a>
  <a href="about.html">About</a>
</nav>

CSS answers the question: how should this look?

h1 {
  color: #2c4a1e;
  font-size: 2.5rem;
}

p {
  font-size: 1.1rem;
  line-height: 1.6;
}

nav {
  background-color: #2c4a1e;
  padding: 1rem 2rem;
}

The HTML is the skeleton. The CSS is the design — the paint, the furniture, the lighting. You can apply completely different CSS to the same HTML and produce a completely different-looking page. You can also change all the HTML content without touching the CSS and the styles still apply correctly.

What CSS stands for

CSS stands for Cascading Style Sheets. The name has meaning:

• Cascading — rules flow down and combine, and when rules conflict, there is a defined order for deciding which one wins. You will learn about this in Lesson 05.
• Style — CSS is only about visual presentation: colors, sizes, spacing, layout, fonts.
• Sheets — styles are written in a separate document (a stylesheet) that applies to one or many HTML pages.

What CSS controls

CSS controls everything visual about a page:

Category	Examples
Color	text color, background color, border color
Typography	font family, size, weight, line height, letter spacing
Spacing	margin, padding, gap between elements
Layout	how elements are positioned relative to each other
Size	width, height, max-width, aspect ratio
Borders	thickness, style, radius (rounded corners)
Effects	shadows, opacity, transitions

What CSS does not control

CSS controls appearance only. It does not:

• Add or remove content (that is HTML or JavaScript)
• Create the structure of a page (that is HTML)
• Handle user interactions or logic (that is JavaScript)
• Change what content means (semantic meaning belongs to HTML)

This separation of concerns is intentional and powerful. A well-structured HTML page can be restyled entirely by swapping out the stylesheet — no HTML changes required. The same HTML can have a completely different look for print, for mobile, for dark mode.

The unstyled vs styled comparison

Without CSS, a web browser renders HTML with its own built-in default styles — black text, blue links, Times New Roman, white background. Functional, but not designed.

Without CSS:

Summit Trail Outfitters

Guided hiking in the Pacific Northwest.

Tours   About

(Black text on white, default serif font, no layout)

With CSS applied: The same HTML becomes a site with a branded color palette, a horizontal navigation bar, card-based tour listings, and readable typography. The HTML has not changed. Only the CSS changed.

This is the power of CSS. The structure is one thing; the experience is another.

Exercise

Open your Summit Trail Outfitters index.html file in a browser — the file you built in HTML Foundations. Look at the current, unstyled page.

Write down three things you would change about its appearance using CSS:

1. Something about the colors (what color should the heading be? the background? the navigation?)
2. Something about the typography (font size, font style, line height)
3. Something about the layout (how should the navigation links be arranged? the tour cards?)

Keep this list. You will apply every one of these improvements over the course of CSS Foundations.

Recap

• HTML defines structure and content. CSS defines appearance and layout.
• CSS stands for Cascading Style Sheets — it cascades, it handles style, and it lives in a separate document.
• CSS controls color, typography, spacing, layout, size, borders, and visual effects.
• CSS does not add content, handle logic, or change semantic meaning — those belong to HTML and JavaScript.
• The same HTML can look completely different with different CSS applied.