Document Resources

Stylesheet Link

Attach Presentation as a Resource

The document links a theme stylesheet before the body renders a primary button that receives that presentation.

Program

HTML links external resources with relationship metadata. A stylesheet link does not draw by itself; it changes how later elements are presented.

stylesheet_link.html
Visuals: captured from real browser rendering
<head>
  <link rel="stylesheet" href="theme.css">
</head>
<body>
  <button class="primary">Save draft</button>
</body>

  1. Open the head for resource links.

    The page has no visual body content yet.
    Resource links belong in the head before visible content is parsed.

  2. Declare the resource as a stylesheet.

    A stylesheet relationship appears in the resource list.
    The rel value tells the browser how to use the linked file.

  3. Point the stylesheet link at theme.css.

    The theme.css resource is ready to load.
    The href value identifies the CSS file.

  4. Render a button that uses the loaded style.

    A styled Save draft button appears in the body.
    The button is ordinary HTML; the linked stylesheet controls its presentation.

  5. Complete the styled body.

    The final page shows the styled Save draft action.
    The linked stylesheet remains a document resource for all matching body elements.
rel stylesheet rel="stylesheet" tells the browser that the linked resource is CSS.
href The href attribute gives the URL of the resource to fetch.