OnlineCBT
Choose where a stylesheet lives
CSS can be written in an element's style attribute, a style element, or a separate linked file. These locations affect reuse and maintenance. They do not change the basic syntax of properties and values.
Three forms
One paragraph
In styles.css, write ordinary rules without a style wrapper:
.summary {
color: #1d4ed8;
line-height: 1.6;
}When each is useful
Inline styles can express a small dynamic value, but repeating them on many elements makes consistent editing difficult. Internal styles suit isolated demonstrations. External stylesheets support multiple pages and may be cached independently. For a growing project, keep shared component styles in a predictable file structure.
Debug a missing stylesheet
- Check the href relative to the HTML document's URL, not your mental picture of the project folder.
- Open the Network panel and confirm that the CSS request returns a stylesheet, not a 404 HTML page.
- Check the response content type and any browser console errors.
- Inspect whether the rule is loaded but overridden by another declaration.
A relative image URL inside a stylesheet resolves relative to that stylesheet's URL. This differs from an inline style's base URL and can explain why moving CSS breaks background images.
Cascade note
Inline author declarations normally outrank ordinary author stylesheet rules for the same property, but “inline always wins” is an oversimplification: importance, origin, layers and other cascade rules also matter. Avoid solving ordinary maintenance problems by scattering !important.
Practice
Move a card's internal stylesheet into styles.css and link it from two pages. Confirm that changing the shared file updates both. Intentionally break the filename once, observe the failed request, then repair the path.
