CSS files and rules: keep presentation out of the document structure

How the rule works

A receipt page needs the same header and status colors on several routes. Put shared rules in one stylesheet rather than repeating style attributes on every element. The HTML remains the source of titles, labels, and actions; CSS supplies paint and spacing. The sample assumes the receipt stylesheet is served from a stable local asset path. If it fails to load, the heading and status text still exist. Keep critical content in markup and use a network trace to confirm the CSS file is not missing or needlessly duplicated.

<link rel="stylesheet" href="/assets/receipt-view.css">
<style>
  .receipt-status { color: #175b44; font-weight: 700; }
</style>

Cost and verification

A linked file adds a request on first load, then can be cached across routes. Inline CSS avoids that request but repeats bytes and complicates cache invalidation when copied across pages. The snippet shows the attachment and a small local override; move that override into the shared file if several pages need it. CSS does not sanitize data or create an accessible name. Confirm the page remains understandable with styling disabled and the final asset path exists in the deployment.

Common Mistakes

• Do not use CSS-generated text as the sole source of a status.
• Do not copy the same large style block into every page.
• Do not assume a linked stylesheet loaded merely because the page still renders.

Connected lessons

• CSS Foundations
• CSS selectors and the cascade: trace the winning declaration
• CSS cascade layers: set precedence before selectors grow
• HTML document skeleton: declare language, encoding, and a real title