How HTML and CSS Actually Work Together

HTML describes the structure of a page. CSS describes how that structure looks. A web page is the result of taking the HTML, applying the CSS, and letting the browser render the combination. That separation of concerns (content from presentation) is one of the cleanest design choices in modern computing, and the reason the web has scaled to billions of pages without the underlying model breaking.

The way I think about it is that HTML is a noun and CSS is an adjective. The HTML says “this is a heading, this is a paragraph, this is a list, this is a button.” The CSS says “the heading is 32 pixels and dark blue, the paragraph has a line height of 1.5, the list items have 8 pixels of padding.” Both are needed for the rendered result. Either can change without the other.

Plain English

HTML stands for HyperText Markup Language. CSS stands for Cascading Style Sheets. Both are read by web browsers. HTML is the structure. CSS is the style sheet that gets applied to that structure.

How They Connect

CSS connects to HTML in three ways:

External stylesheet (the standard way)HTML

<head>
    <link rel="stylesheet" href="styles.css">
</head>

Internal stylesheetHTML

<head>
    <style>
        h1 { color: blue; }
    </style>
</head>

Inline stylesHTML

<h1 style="color: blue;">Hello</h1>

External is the standard. The browser fetches the CSS file once and caches it across pages. Internal stylesheets work for single-page tools or examples. Inline styles are used sparingly because they don't scale across a site, but they're useful for one-off overrides.

The Selector System

CSS rules use selectors to target HTML elements. The basics:

Common selector typesCSS

/* Element selector */
h1 { color: blue; }

/* Class selector (matches class="callout") */
.callout { background: yellow; }

/* ID selector (matches id="main") */
#main { padding: 20px; }

/* Descendant (any p inside an article) */
article p { line-height: 1.5; }

/* Direct child */
nav > ul { list-style: none; }

/* Attribute selector */
input[type="email"] { width: 300px; }

/* Pseudo-class */
a:hover { color: red; }

Combining these is how real CSS gets written. .card.featured h2targets an h2 inside an element that has both the “card” and “featured” classes. Selector composition is most of what makes CSS powerful and readable when used well.

The Cascade

Multiple CSS rules can target the same element. When they conflict, the cascade decides which wins. The simplified rules of conflict resolution:

Importance. Anything marked !important beats normal rules.
Specificity. More specific selectors beat less specific. ID beats class beats element.
Source order. If specificity ties, the rule that appears later wins.

Specificity is calculated as a four-part value: (inline, IDs, classes/attributes/pseudo-classes, elements/pseudo-elements). #main h1 has specificity (0,1,0,1). .intro h1 has (0,0,1,1). The first wins because the ID counts more than the class.

This is the part beginners trip on. CSS “not working” is usually a specificity conflict where another rule is winning, not the rule the developer wrote. Browser dev tools show you which rules apply and which got overridden.

The Box Model

Every HTML element renders as a rectangular box. The box has four nested layers:

Content: The actual text or image.
Padding: Space inside the border.
Border: The line around the padding.
Margin: Space outside the border.

The total visible width of an element is content + padding + border (margin doesn't add to the box; it's the gap between this box and the next). The default box-sizing: content-box behavior is confusing because setting width: 200px doesn't actually make the element 200px wide if you also have padding. Most modern projects set box-sizing: border-box globally so width includes padding and border.

The Layout Models

CSS has had several layout models added over time:

Normal flow. Default. Block elements stack vertically, inline elements flow horizontally.
Floats. The original way to wrap text around images. Mostly historical now.
Flexbox. One-dimensional layout (rows or columns). Most useful for navbars, button groups, single-axis component layouts.
Grid. Two-dimensional layout. The right tool for actual page-level layout, dashboards, and complex grids.

Modern web layout is mostly Flexbox plus Grid, with normal flow handling everything between. Floats are essentially dead for layout purposes.

How the Browser Combines Them

Roughly:

Browser parses the HTML and builds the DOM tree.
Browser parses the CSS (linked stylesheets, internal styles) and builds the CSSOM.
Browser combines DOM + CSSOM into the render tree (only the elements that actually display).
Browser computes layout (positions and sizes of every element).
Browser paints the rendered output to the screen.

Each step has performance implications. The render tree is what actually gets laid out and painted. Display:none elements aren't in the render tree at all. Each subsequent CSS change can trigger a re-layout (slow) or just a repaint (fast) or just a composite (fastest), depending on what changed.

Why the Separation Matters

Three benefits:

Reusability. One stylesheet can style hundreds of pages with the same HTML structure.
Maintenance. Changing a color across the site is one CSS edit, not editing every HTML file.
Accessibility. Screen readers and search engines parse the HTML structure. Pages that put structure in HTML and styling in CSS are dramatically more accessible than ones that try to make styled HTML.

The separation breaks down when developers use HTML attributes for styling (deprecated) or use CSS to fake structure that should be in the HTML (an anti-pattern). The principle is that an HTML file should make sense semantically without any CSS attached. Apply CSS, and the same content gets rendered nicely. The structure shouldn't change.

Takeaway

HTML is structure. CSS is presentation. The browser combines them through the cascade, applying the right rules to the right elements based on selectors and specificity. The separation of concerns is what lets the same content be rendered for different screens, printed, read aloud by a screen reader, or scraped by a search engine. Most beginner CSS pain is specificity conflicts, not actual styling problems.

The Take

Learn the cascade and specificity early. Most CSS frustration in the first year of web development is “why isn't this rule applying?” and the answer is almost always that something else has higher specificity. Browser dev tools are the best CSS teacher: inspect an element, see which rules apply, see which got overridden, and you'll absorb specificity in a week. The other half of CSS skill is learning Flexbox and Grid for layout. With those two and an understanding of the cascade, you can build almost anything.