Why is my CSS not working?

Nine times out of ten it's a specificity conflict, not a styling problem. Another rule with a more specific selector is beating the one you wrote. Open browser dev tools, inspect the element, and look at which rules apply and which got struck through as overridden. An ID selector beats a class selector, which beats a plain element selector.

Should I use inline styles, internal styles, or an external stylesheet?

External stylesheets are the standard. The browser fetches the CSS file once and caches it across every page on the site. Internal stylesheets, written in a tag in the head, work fine for single-page tools and examples. Inline styles don't scale across a site, so use them sparingly for one-off overrides.

When do I use Flexbox versus Grid?

Flexbox for one-dimensional layout, a single row or a single column. It shines on navbars, button groups, and single-axis component layouts. Grid handles rows and columns at once, which makes it the right tool for page-level structure, dashboards, and complex grids. Real projects use both side by side.

How HTML and CSS Actually Work Together

Q: What is the difference between HTML and CSS?

HTML defines what content a page contains and CSS defines how that content looks. HTML says "this is a heading, this is a paragraph, this is a list." CSS says "the heading is 32 pixels and dark blue, the paragraph has a line height of 1.5." Both are read by the browser and combined to produce the rendered page, and either can change without the other.

HTML describes the structure of a page. CSS describes how that structure looks. The page you see is the browser taking one, applying the other, and rendering the result. It sounds trivial written down, and it is the single best design decision the web ever made. Splitting content from presentation is the reason the same document can be a phone screen, a desktop layout, a printed page, and something a screen reader speaks aloud, without anyone rewriting the content.

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 itself is a three-part count: (IDs, classes/attributes/pseudo-classes, elements/pseudo-elements). #main h1 scores (1,0,1). .intro h1 scores (0,1,1). The first wins because one ID beats any number of classes. Inline styles aren't part of that count at all, which trips people up. They sit above the whole selector-specificity system and beat anything that isn't !important. That's exactly why inline styles are painful to override later.

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.