Introduction to CSS

CSS controls the appearance of HTML. The same heading and paragraph can be presented with different colors, spacing, typography and layout without changing their meaning.

HTML describes the content and structure of a page. CSS (Cascading Style Sheets) describes how that content should look. A browser first builds the page from HTML, then applies matching style rules to the elements.

A single stylesheet can style many pages. This is why a site can change its visual identity without rewriting every heading or paragraph.

The markup already contains meaningful elements.

HTML

<article class="intro-card"><h3>Fresh Ideas</h3><p>Start with a clear message.</p></article>

CSS

/* No stylesheet rules yet. */

Rendered output

Observe: The heading and paragraph appear using the browser’s default styling.

Apply typography, spacing and a surface to the same markup.

HTML

<article class="intro-card"><h3>Fresh Ideas</h3><p>Start with a clear message.</p></article>

CSS

.intro-card { background: #eff6ff; border-radius: 12px; padding: 20px; font-family: Arial, sans-serif; }
.intro-card h3 { margin: 0 0 8px; color: #1d4ed8; }
.intro-card p { margin: 0; color: #334155; }

Rendered output

Observe: Only CSS changed; the HTML elements and the words are identical.

A rule selects HTML elements, assigns properties, and influences their appearance. CSS never replaces the underlying text or HTML semantics.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• CSS changes presentation, not the fundamental meaning of an HTML element.
• A stylesheet does not automatically affect every element; selectors determine matches.

Change the heading color to green and increase card padding to 28px. Compare the two versions without changing the HTML.

Before changing the code, predict what will change. Then verify by checking the rendered result.

Keep HTML meaningful and use CSS to express the visual design.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.