Diagnosing styles and delivery

Confirm the resource that arrived

A link rel="stylesheet" connects the document to a style resource. HTTP 200 indicates a successful response at that level, but the route may have returned an HTML fallback page instead of CSS. Compare Content-Type, response content and final URL.

The expected CSS type is text/css. A type attribute on the link does not turn HTML bytes into CSS or correct the server response. Only after confirming delivery does it make sense to find the declaration in the received stylesheet.

The base of a relative path

In an external stylesheet, a relative url is normally resolved against the stylesheet URL rather than the page URL. In the example, ../img/card.svg moves up from css to assets. Moving the stylesheet to /releases/r2/css changes the reference to /releases/r2/img/card.svg even when CSS text stays unchanged.

Exercises use direct URLs without custom properties or redirects to make this relationship unambiguous. Correct the path or resource publication; changing width does not fix a request to another location.

Interpret parser recovery

An invalid value in one isolated declaration can be discarded without invalidating the rest. However, omitting a semicolon between color: red and background-color: blue joins text into an invalid declaration up to the next separator. Padding after that separator can still be parsed.

A newline does not replace a semicolon. Locate the actual error boundary before concluding that the whole stylesheet failed or that the browser applied a default color.

Selectors and application conditions

A class absent from the document can be a logical error without invalid syntax. An unknown pseudo-class in an ordinary comma-separated list can invalidate the entire rule. Forgiving lists in :is and :where behave differently.

If the parser accepts the rule, check element matching and media conditions before comparing precedence. A loaded resource does not prove every rule is relevant, and a relevant rule can still lose in the cascade.

Imports and shorthand change contracts

The example import is valid after the layer-order statement. Inserting a style rule before the import makes it late and ignored; a @layer block is also not the ordering-statement exception. Elsewhere, background: white resets omitted subproperties, unlike background-color: white.

An image can disappear without any download failing. Identify the exact syntax and effects on the property set rather than reviewing only the final color value.

A policy can block before the cascade

If the console records a style-src block for a new origin, higher specificity does not solve it. First confirm whether the URL identifies the intended resource and whether policy should allow that origin. The reference may need correction, the stylesheet may need serving from an authorized origin, or policy may need deliberate revision with the required scope.

Disabling all CSP to restore appearance mixes a visual fix with a broad change to loading conditions.

Reconcile a published version

A cache can legitimately retain old bytes if the URL was declared immutable and the response remains fresh. Publishing new bytes at the same URL does not guarantee every client obtains them immediately. Use coherent versioned or hashed identities and update referencing documents.

In the lesson case, evidence is HTML still requesting v1 and cache supplying v1. An isolated new v2 file does not close the fix while the path used by the client still references the previous one.

Common pitfalls

Confusing HTTP 200 with applied CSS; adding !important to a blocked resource; resolving URLs against the page rather than the stylesheet; moving imports after rules; ignoring shorthand resets; replacing bytes at an immutable URL without updating references.