Store reusable rules in a .css file, not in another HTML file, and link that stylesheet from the <head> of each page. Choose the URL style according to where the site is deployed.
Last updated: October 12, 2026.
<!-- /index.html and /products/widget.html -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/assets/css/site.css">
<title>Widget</title>
</head>A leading slash makes /assets/css/site.css root-relative: the browser requests it from the current origin’s root regardless of the HTML page depth. This is convenient when the site always lives at the domain root.
Choose the correct URL for the deployment
MDN documents the <link> element and its href attribute for external stylesheets. A document-relative URL such as ../assets/css/site.css is resolved from the current page. A root-relative URL starts with / and is resolved from the website root.
If the application is deployed under a path such as https://example.com/myapp/, the URL /assets/css/site.css points outside /myapp/. In that case use an application base path, a template helper, or a relative URL that matches the final directory structure. Never place a Windows filesystem path such as C:\site\assets in href.
Organize styles without creating one giant file
A shared file avoids copying rules and lets the browser reuse a cached response. Keep truly global typography, colors, and layout primitives in site.css. Add a second page-specific stylesheet only when a page has substantial unique rules. Load styles in a predictable order so later rules do not override earlier rules accidentally.
Configure normal HTTP caching for production, then change the asset URL when deploying a new build, for example with a generated version query or fingerprinted filename. This preserves reuse without leaving visitors on stale CSS indefinitely.
Use browser developer tools to check the stylesheet request and computed styles. A 404 usually means the URL and document root disagree; a successful request with the wrong MIME type can indicate a server fallback page. Continue with fixing local asset 404 errors, choosing the page character encoding, and building URLs safely.
