A first look at how CSS controls presentation — rules, selectors, properties, values, stylesheets, and the habit of separating structure from style
Open any well-designed website and you are looking at the work of two languages at once. HTML gave the page its bones — headings, paragraphs, lists, links, images, and landmarks that carry meaning. But none of that explains why the heading is large and dark blue, why the navigation bar sits neatly across the top of the screen, why the body text is easy to read, or why the page looks calm and organized rather than like a plain, unstyled document. That second job — controlling how a page looks — belongs to CSS.
In Part II of this book, you learned to write HTML that is structured, semantic, and meaningful. You wrote pages that a browser, a screen reader, and a search engine could all understand. But if you opened those pages in a browser, they probably looked plain: black text, blue underlined links, default spacing, no color scheme. That plainness was deliberate. It let you focus entirely on structure without being distracted by appearance. Now it is time to add appearance back in — carefully, and on purpose.
Two different websites can use the exact same HTML markup — the same headings, the same paragraphs, the same navigation links — and still look completely different from one another: different colors, different fonts, different spacing, different layouts. How is that possible if the underlying structure never changes? The answer is CSS. By the end of this chapter, you will understand what CSS is, how a CSS rule is built, where CSS can be written, and how to connect a stylesheet to an HTML page so that structure and style work together without being tangled into one another.
By the end of this chapter, you should be able to:
link element.link element; the rel and href attributes; placing the link in the head; verifying that a stylesheet is connectedCSS stands for Cascading Style Sheets. It is the language browsers use to determine how an HTML document should look. Where HTML says what something is — a heading, a paragraph, a list, a link — CSS says how it should appear: what color, what size, what spacing, what position on the screen.
Without CSS, every web page would look like a plain typed document: black text, default spacing, blue underlined links, and elements stacked one after another from top to bottom in the order they appear in the HTML. CSS is what allows the same underlying content to become a polished newspaper layout, a colorful product page, a minimalist portfolio, or a dense data dashboard.
The word "cascading" refers to how CSS rules combine and compete when more than one rule could apply to the same element. Several different style rules — from the browser, from the page author, and sometimes from the user — can all apply to one element at once, and CSS has a consistent set of rules for deciding which one wins. Chapter 12 explores the cascade in detail. For now, it is enough to know that the name describes a layered, rule-based system rather than a single flat list of instructions.
div into a heading for assistive technology, and it cannot make unstructured markup meaningful. Meaning is HTML's job, not CSS's.span to look like a button does not make it behave like a button for keyboard or screen-reader users. Semantic HTML, from Part II, remains the foundation.It helps to think of HTML as the architecture of a building and CSS as the interior design, paint, and lighting. The architecture determines what rooms exist and how they connect. The design determines how those rooms feel. You cannot fix bad architecture with good paint — and in the same way, you cannot fix poor HTML structure with clever CSS.
Early in the history of the web, developers often mixed structure and presentation directly inside HTML — using tags and attributes meant purely to control appearance, such as font tags and color attributes scattered through the markup. This approach created pages that were difficult to update, inconsistent across sites, and hostile to assistive technology. CSS was created specifically to separate these two concerns: HTML should describe what content is, and CSS should describe how that content looks.
This separation is not a stylistic preference. It produces real, practical benefits that you will feel throughout the rest of this book.
| Benefit | Why Separation Makes It Possible |
|---|---|
| Easier maintenance | Changing a color or font in one CSS file updates every page that links to it, instead of editing color values inside dozens of HTML files. |
| Consistency | A shared stylesheet keeps headings, buttons, and spacing visually consistent across an entire website automatically. |
| Reusable design | The same stylesheet can be applied to many pages, and a new stylesheet can give old, unchanged HTML a completely new appearance. |
| Cleaner HTML | HTML stays focused on meaning and structure, which keeps it easier to read, easier to debug, and friendlier to screen readers and search engines. |
| Independent updates | A designer can update visual style without touching content, and a writer can update content without touching layout. |
CSS is written as a series of rules. Each rule tells the browser: "find these elements, and apply these styles to them." A rule has two main parts: a selector, which chooses which elements the rule applies to, and a declaration block, which lists the styles to apply.
p { color: navy; font-size: 18px; }
Here, p is the selector — it selects every paragraph element. The part inside the curly braces is the declaration block. Each line inside it, such as color: navy;, is a declaration, made up of a property (color) and a value (navy), separated by a colon and ended with a semicolon.
Every declaration ends with a semicolon. While the very last declaration in a block technically works without one in most browsers, leaving it off is a common source of errors once you add another declaration later and forget to add the missing semicolon first. The habit of always ending every declaration with a semicolon — no exceptions — will save you from one of the most frequent beginner CSS mistakes.
A stylesheet is simply a collection of rules like this one, written one after another. The browser reads every rule, figures out which elements each selector matches, and applies the resulting styles to the page.
Forgetting the semicolon between declarations is one of the most common beginner errors. Without it, the browser may misread where one declaration ends and the next begins, causing styles to silently fail. Unlike many programming languages, CSS does not always show an error message — a broken rule may simply be ignored, leaving you to wonder why a style "isn't working."
A selector is the part of a CSS rule that decides which HTML elements the rule applies to. CSS offers many kinds of selectors — Chapter 12 covers them in depth — but three are essential to know from the start: type selectors, class selectors, and ID selectors.
| Selector Type | Syntax | What It Matches |
|---|---|---|
| Type selector | p, h1, nav | Every element of that HTML type on the page |
| Class selector | .card | Every element with class="card", regardless of its HTML type |
| ID selector | #site-header | The single element with id="site-header" — an ID should appear once per page |
Once a selector chooses its elements, the declaration block describes how those elements should look using properties and values. A property names an aspect of appearance you want to control — color, background-color, font-size, margin — and a value specifies the setting for that property — navy, 16px, center.
This section introduces selectors only enough to get you writing useful CSS right away. Chapter 12 returns to selectors in much greater depth, including grouping selectors, descendant selectors, pseudo-classes, inheritance, specificity, and the full cascade — the rules that decide which style wins when several rules could apply to the same element.
CSS can be written in three different places. Each one has a different scope and a different recommended use.
| Method | Where It Is Written | Scope | Recommended Use |
|---|---|---|---|
| Inline style | Inside a style attribute on a single element | That one element only | Quick testing or rare one-off cases; avoid as a habit |
| Internal stylesheet | Inside a <style> element in the head | That one HTML document | Small, single-page examples or isolated demonstrations |
| External stylesheet | In a separate .css file, linked from the head | Every page that links to the file | The standard professional habit for real projects |
Inline styles affect only one element, cannot be reused, and are difficult to override consistently, since they normally take priority over rules in stylesheets. A page built with many inline styles quickly becomes inconsistent and hard to maintain, because every visual change must be repeated by hand on every single element. This textbook uses external stylesheets as the default habit starting in Section 11.6.
To use an external stylesheet, you create a separate file with a .css extension and connect it to an HTML document using the <link> element, placed inside the head. Recall from Chapter 3 that a tidy project keeps CSS files in their own folder, often named css.
css/main.css to index.htmlcss inside your project folder, next to index.html.main.css. This file will hold your CSS rules.index.html, inside the head element, add: <link rel="stylesheet" href="css/main.css">index.html in a browser. Any rules written in main.css should now apply to the page.body { background-color: yellow; }, save, and reload the page. If the background does not change, the path in href is the first thing to check.The rel="stylesheet" attribute tells the browser what kind of linked resource this is — in this case, a stylesheet to apply to the document. The href attribute gives the path to the file, following the same relative path rules you learned in Chapter 3. A wrong path is the single most common reason CSS appears not to work at all.
If none of your CSS seems to be applying, open the browser's developer tools (Chapter 4) and check the network or console panel for a failed request to your CSS file. A 404, or a stylesheet that never appears in the page's loaded resources, almost always means the href path is incorrect or the file was saved in the wrong folder.
With selectors, properties, and a linked stylesheet in place, you can begin applying real styles. This section introduces a small, practical set of properties for text and simple boxes. Later chapters return to typography (Chapter 13) and the box model (Chapter 14) in much greater depth — this is only a first, gentle introduction.
| Property | Purpose | Example Value |
|---|---|---|
color | Text color | color: #1a2c6b; |
background-color | Background color behind an element | background-color: #f0f0f8; |
font-family | Typeface used for text | font-family: Georgia, serif; |
font-size | Size of text | font-size: 18px; |
text-align | Horizontal alignment of text inside its element | text-align: center; |
padding | Space inside an element, between its content and its edge | padding: 16px; |
border | A line drawn around an element's edge | border: 1px solid #c0c0cc; |
Notice that .card in the second rule is a class selector. Any element in the HTML marked with class="card" — whether it is a div, a section, or an article — will receive that background color, padding, and border. This is the beginning of reusable styling, a theme this chapter returns to in Section 11.9.
Every element on a page is technically a box, even when no border is visible. Padding, borders, margins, width, and height all interact in a predictable system called the box model. You will study it in full in Chapter 14. For now, treat padding and border as simple tools for adding breathing room and a visible edge.
If you write a plain HTML page with no CSS at all and open it in a browser, it will not look like unformatted plain text. Headings will already be bold and noticeably larger than body text. Paragraphs will already have space between them. Lists will already show bullets or numbers. Links will already be blue and underlined. None of this happened by accident — every browser applies its own built-in stylesheet, called the user-agent stylesheet, before your own CSS is applied.
This explains something that confuses many beginners: a page with "no styles" is not actually styleless. It is styled by the browser's defaults. When you write your own CSS, you are not starting from a truly blank canvas — you are adding rules that, depending on specificity and source order (covered fully in Chapter 12), can override what the browser already decided.
Different browsers do not always agree on every default value — small differences in default margin, font size, or list spacing can appear between browsers. Professional developers often account for this using reset or normalization techniques, which intentionally remove or standardize certain browser defaults before applying their own design. This textbook does not require a formal reset at the introductory level, but you should understand that the variation exists and that author styles are what bring a page's appearance under your control.
Practically, this means that whenever a page looks "almost right" but slightly different from what you expected, the browser's default styles are often the explanation — not a mistake in your own CSS. Inspecting an element with developer tools, as you learned in Chapter 4, will usually show you exactly which styles are browser defaults and which are your own.
One of the most important habits to develop early is thinking of CSS as a system, not as page-specific decoration. A single external stylesheet, linked from every page in a website, can give the entire site a consistent look — consistent colors, consistent spacing, consistent typography — without repeating a single rule by hand on each page.
Classes are the main tool that makes this reuse possible. A class such as .card, .button, or .section-title can be applied to many different elements across many different pages. Change the rule once, in one file, and every element using that class updates everywhere it appears.
css/main.css, is linked from the head of every one of those pages..card apply identically across every page that links the file.main.css, and every linked page updates automatically. This is the practical payoff of separating structure from presentation.Chapter 18 takes reuse a step further with CSS custom properties (variables), which let an entire color and spacing system be defined once and reused throughout a stylesheet. The habits you build now — writing classes instead of repeating one-off rules — prepare you directly for that chapter.
This section walks through building a small external stylesheet for a simple page, combining everything covered in this chapter: rules, selectors, properties, values, linking, and reuse through classes.
about.html page with a header containing an h1, a main containing a few paragraphs, and a section with class="card" highlighting one fact.<link rel="stylesheet" href="css/main.css"> inside the head of about.html.main.css, write a rule for body setting a light background color, a readable font-family, and a comfortable line-height.h1 setting color and font-family so the heading stands out clearly from body text..card with background-color, padding, and border, so this class can be reused on any page that needs a highlighted box.Notice that nothing about about.html needed to change visually inside the markup itself — every change happened in main.css. This is the habit you will repeat for the rest of the book: write meaningful HTML first, then control its appearance from a linked, external stylesheet.
head, or externally in a linked .css file. External stylesheets are the standard professional habit because they scale across many pages.<link rel="stylesheet" href="..."> element in the head. A broken or incorrect href path is the most common reason linked CSS appears not to work.color, background-color, font-family, font-size, padding, and border allow simple, readable text and box styling, previewing deeper coverage of typography and the box model in later chapters..css file.color: navy;.color or font-size.navy or 18px.p or h1..card.#site-header.style attribute, applying only to that one element.<style> element in a page's head, applying only to that one document..css file and linked into one or more HTML documents, the standard approach for real projects.<link>, used with rel="stylesheet" and an href path to connect an external CSS file to a page.Answer these questions before beginning the full review questions. They check basic understanding, not deep analysis.
<link> element tells the browser where the CSS file is located?p matches by HTML element type. A class selector such as .card matches by an author-assigned attribute that can be applied to any element type. The leading period is required for class selectors; leaving it off, or confusing it with an ID's leading hash symbol, is a frequent beginner error that causes a rule to silently match nothing.href attribute of the <link> element, not a mistake inside the CSS file itself. Always confirm the stylesheet is actually loading, using developer tools, before assuming the rules themselves are wrong.These activities build comfort with reading and writing the basic anatomy of a CSS rule.
.button { background-color: #1a2c6b; color: white; padding: 10px; }, identify the selector, and list each property-value pair separately.<h2 class="title" id="main-title">, write three different selectors — a type selector, a class selector, and an ID selector — that would each match this element.p { color: navy font-size: 16px }. Identify what is missing and rewrite it correctly.class="alert" and sets its background color to a light red and its text color to dark red.These activities connect path skills from Chapter 3 to the specific task of linking CSS.
index.html at the top level and css/styles.css inside a css folder. Write the exact <link> element that belongs in the head of index.html.<link rel="stylesheet" href="styles.css"> but their CSS file is actually located at css/styles.css. Explain what will happen and how to fix it.index.html, about.html, and contact.html, all at the top level, sharing one stylesheet at css/main.css. Write the <link> element each page needs, and explain why the path is the same on every page in this case.Read each short CSS example and explain, in plain language, what it does to a page.
body { background-color: #1a1a1f; color: white; }.card { border: 1px solid gray; padding: 12px; }h1, h2, h3 { font-family: Georgia, serif; }#site-footer { text-align: center; font-size: 12px; }Each scenario describes CSS that is not behaving as expected. Identify the likely cause.
.highlight does not seem to apply to an element. The student checks the HTML and sees <div class="highlite">. What is wrong?#card as a selector intending it to style several repeated elements, but only the first one is ever affected. What rule about ID selectors explains this?| Error | Typical Symptom | Fix |
|---|---|---|
| Missing semicolon | A style appears to be ignored, often along with the rule after it | End every declaration with a semicolon, with no exceptions |
Wrong href path | None of the CSS file's rules apply anywhere | Re-check the relative path from the HTML file to the CSS file |
| Missing leading period or hash | A class or ID selector matches nothing | Use .classname for classes and #idname for IDs |
| Misspelled class name | An element appears unstyled even though a rule was written for it | Confirm the class name matches exactly between the HTML and the CSS |
| Reused ID across elements | Only one element receives the intended style, or behavior becomes inconsistent | Use a class instead of an ID when styling more than one element |
rel="stylesheet" attribute do on a <link> element?class attribute in HTML. Why must the names match exactly?index.html at the top level and a CSS file at styles/site.css. They write <link rel="stylesheet" href="site.css"> and nothing happens. Diagnose the problem and write the corrected line.div elements. Describe how you would refactor this using a single reusable class instead.header with an h1, a main with two paragraphs, and one section with class="note". Choose your own colors, fonts, and spacing, and explain each rule in one sentence.<link> element.Chapter 11 introduced CSS rules, the three places CSS can live, and a first small set of properties. Chapter 12 goes much further into how CSS chooses elements and resolves conflicts. You will learn grouping selectors, descendant selectors, pseudo-classes, inheritance, specificity, and source order — the complete set of rules that make up "the cascade" in Cascading Style Sheets. Selector conflicts are one of the most common challenges beginners face in CSS, so this next chapter moves carefully and builds confidence through tracing examples by hand before writing larger stylesheets.