Learning objectives
Choose reusable classes and unique IDs; connect a stylesheet; apply color without making meaning depend on color alone.
Prerequisites
Understand attributes and document structure. Be comfortable editing a small CSS rule.
Give structure stable names
A class groups elements for styling or scripting. Several elements can share one class, and an element can have several classes separated by whitespace. Choose names that describe a role or component, such as notice or card-title, rather than names that encode one temporary appearance. A class called green-box becomes misleading when a design changes to blue.
An id identifies one element in the document. It can be a fragment target, a label target, an ARIA relationship target, or a JavaScript lookup. Keep it unique. Use classes for repeated cards and an ID only when one particular node needs an identity. This distinction keeps a growing page easier to maintain and prevents ambiguous relationships.
Choose where the CSS belongs
A link element in head can load a shared stylesheet. A style element can hold page-specific CSS. The style attribute applies declarations to one element, which can be convenient for a small demonstration but becomes difficult to maintain across a real site. Prefer shared rules for repeated visual patterns.
CSS selectors connect those rules to the markup. A period selects a class; a hash selects an ID. ID selectors contribute more specificity than class selectors, making them harder to override. Avoid solving every styling conflict with !important. Inspect which declaration wins, then simplify the selector or revise the component boundary.
HTML’s obsolete presentational attributes, such as bgcolor on a table, do not belong in new code. Use CSS for text color, background, spacing, borders, and layout. A semantic element remains semantic regardless of its color, and a styled div does not automatically acquire the behavior of a button.
Use color as a supporting signal
CSS supports named colors, hexadecimal notation, RGB, HSL, and additional color systems. Choose a small, documented palette and evaluate text against the actual background. A green success message also needs words or another meaningful cue; a red border alone does not explain an input error.
Custom properties let a design share values, such as –accent and –surface. They are CSS values, not HTML attributes. Start with a readable default appearance before adding decorative variations. Check keyboard focus, hover, disabled controls, selection, and visited links rather than evaluating only a screenshot of the resting state.
Working example
<section class="notice notice-success" aria-labelledby="saved-title">
<h2 id="saved-title">Changes saved</h2>
<p>Your reading list is ready.</p>
</section>Another example
<head>
<link rel="stylesheet" href="styles/site.css">
</head>
<body>
<article class="card featured"><h2>Canal walk</h2><p>A level route beside the water.</p></article>
</body>Expected output
The notice receives a pale surface and a colored border through its reusable classes. Its success meaning remains in the words Changes saved, so removing CSS does not remove the message.
Common mistakes
Do not reuse the same ID on every card. Do not put a period inside the class attribute value: write class="card", not class=".card". Do not assume a visually disabled style prevents clicks; real control state requires the corresponding HTML or application behavior.
Accessibility and browser notes
Color contrast depends on the full rendered combination, including transparency and states. Retain a visible keyboard focus indicator. The accessible name of the section comes from its heading through aria-labelledby, so changing that heading updates the section name too.
Practice
Create two warning notices that share styling but have separate headings. Use classes for reuse and distinct IDs for relationships.
Review the solution and reasoning
<section class="notice" aria-labelledby="offline-title"><h2 id="offline-title">You are offline</h2><p>Changes will stay on this device.</p></section>
<section class="notice" aria-labelledby="space-title"><h2 id="space-title">Storage is nearly full</h2><p>Remove an old download before saving another.</p></section>Both notices can use the same CSS rule. Their IDs remain unique, so each relationship resolves to the correct heading. The message text explains the state without requiring a particular border color.