Your First CSS Example

Build a small, self-contained announcement card to connect HTML structure, CSS selectors, declarations and the result.

Start with semantic HTML: a heading, a short explanation and a link. Give the parent a class so the component styles are reusable without changing every element on the page.

Build the presentation progressively: first establish the card surface, then style the heading and action. Observe how the resulting component changes while the markup stays the same.

A reusable CSS class on the wrapper provides a narrow scope for styles, such as <code>.welcome-card h3</code> for its heading.

Create padding, rounded corners and a light background.

HTML

<section class="welcome-card"><h3>Welcome to CSS</h3><p>Build your first component.</p><a href="#learn">Start learning</a></section>

CSS

.welcome-card { background: #eff6ff; padding: 20px; border: 1px solid #bfdbfe; border-radius: 12px; }

Rendered output

Observe: All three child elements now sit inside one padded visual surface.

Add deliberate spacing, contrast and an action style.

HTML

<section class="welcome-card"><h3>Welcome to CSS</h3><p>Build your first component.</p><a href="#learn">Start learning</a></section>

CSS

.welcome-card { font-family: Arial, sans-serif; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 12px; padding: 20px; }
.welcome-card h3 { color: #1d4ed8; margin: 0 0 8px; }
.welcome-card p { margin: 0 0 16px; }
.welcome-card a { background: #1d4ed8; color: #fff; text-decoration: none; padding: 9px 14px; border-radius: 7px; display: inline-block; }

Rendered output

Observe: The title, paragraph and link now read as one intentional component.

A reusable CSS class on the wrapper provides a narrow scope for styles, such as <code>.welcome-card h3</code> for its heading.

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

• Scope component selectors so unrelated headings and links remain unaffected.
• Use an actual anchor for navigation rather than making arbitrary text look clickable.

Change the card accent from blue to teal and increase the action button padding. Identify all the declarations you changed.

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

You can build useful CSS interfaces incrementally: structure first, then surface, then details.

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