Use component-scoped CSS to control which elements a rule reaches, and a shared stylesheet to reuse rules across pages. For a small HTML project on your Mac, you can combine both; choose the file arrangement according to what you need to move and maintain.

This guide walks through styling a local page containing a rounded-square card and a separate note. The task is to keep the card’s appearance predictable, then decide whether its CSS belongs inside the page or in a reusable file. The labels and shape are synthetic, and the example needs no framework or downloaded assets.

What are you actually choosing?

There are two decisions: where CSS lives, and which elements it selects. An embedded stylesheet lives in an HTML document’s style element. An external stylesheet is a separate resource attached with link, using rel="stylesheet" and an href path. Those are HTML’s mechanisms for supplying CSS; neither arrangement automatically gives ordinary selectors a component boundary. HTML Standard: The style element, MDN: External resource link element.

Native CSS @scope adds a selection boundary. You identify a root element, then write rules that apply within that subtree. It can keep short selectors useful when the surrounding document contains similar elements. Chrome’s documentation also distinguishes native scoping from tooling that rewrites selectors with generated classes or attributes. Such tooling is an additional prerequisite when a component example depends on it. Limit the reach of your selectors with the CSS @scope at-rule.

For this task, use the following decision aid. It is an editorial recommendation based on the documented mechanisms, rather than a browser requirement.

Your immediate task Suggested arrangement What must travel with it
Keep one small page as a single file Embed CSS in a style element HTML, plus any separately referenced assets
Maintain the same card across several pages Use an external stylesheet with dedicated component classes Each HTML page and the shared CSS
Use shorter selectors within a defined subtree Add explicit-root @scope rules, embedded or external CSS and markup containing the matching root
Support browsers whose scoping support is uncertain Keep essential styling in ordinary class rules HTML and whichever stylesheet contains those rules

“Portable” therefore needs a concrete meaning. A single HTML file is convenient to move by itself. A folder containing HTML and CSS can also be portable, provided its paths still resolve. A reusable component needs a third kind of portability: its destination must preserve the markup hooks its selectors expect.

Build a working two-file example on your Mac

Create a folder named form-study. Inside it, save two plain-text files named index.html and shared.css. If you use TextEdit, choose File > New, then Format > Make Plain Text before pasting code. For the HTML file, Apple documents saving with the .html extension and choosing Use .html when prompted. Ensure the stylesheet’s actual filename is shared.css, without an added .txt suffix. Work with HTML documents in TextEdit on Mac.

Save this complete HTML document as index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Form Study</title>
  <link rel="stylesheet" href="shared.css">
</head>
<body>
  <main class="study-page">
    <h1>Form Study</h1>
    <section class="shape-card">
      <h2 class="shape-card__title">Tile A</h2>
      <div class="shape-card__shape" aria-hidden="true"></div>
      <p>A rounded square.</p>
    </section>
    <section class="plain-note">
      <h2>Note B</h2>
      <p>This section is outside the card.</p>
    </section>
  </main>
</body>
</html>

Save this complete stylesheet as shared.css:

body {
  margin: 0;
  background: #f4f3ef;
  color: #252525;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

.study-page {
  max-width: 40rem;
  margin: 2rem auto;
  padding: 0 1rem;
}

.shape-card {
  padding: 1.5rem;
  border: 2px solid #526676;
  border-radius: 1rem;
  background: #ffffff;
}

.shape-card__title {
  margin: 0 0 1rem;
  color: #36576b;
}

.shape-card__shape {
  width: 6rem;
  height: 6rem;
  border-radius: 1.25rem;
  background: #597b91;
}

.plain-note {
  margin-top: 2rem;
}

Open index.html in Safari or another desktop browser. The intended result is a bordered white card with a blue rounded square, followed by an unbordered note. The stylesheet connection follows MDN’s documented pattern: the HTML names the CSS resource through href on a stylesheet link. MDN: Including a stylesheet.

The example deliberately gives the card title its own class. That makes the intended styling relationship visible without requiring native scoping. The page background and font are document defaults; the card border, title color and shape belong to the card. Keep that distinction when extracting reusable rules: a destination page may want the card without adopting this page’s background or width.

To share the design, make a second HTML page in the same folder and use the same stylesheet link. Both pages then reference one CSS file. Treat edits to that file as changes to every page that links it; review each page after changing a shared rule.

When does native scoped CSS help?

Use @scope when a component contains several elements that benefit from simple local selectors, especially when you need an explicit lower boundary around nested content. The CSS Cascading and Inheritance specification defines a scope through a root and optional limit elements. The root is included; limit elements and their descendants are excluded from matching by the scoped rules. This specification is a Working Draft. CSS Cascading and Inheritance Level 6: Scoping Styles.

For a small experiment, append the following optional fragment to shared.css. It uses the existing sample markup and changes the card paragraph’s appearance:

/* Optional addition to shared.css */
@scope (.shape-card) {
  p {
    padding: 0.5rem;
    background: #edf2f5;
  }
}

In a supporting browser, the paragraph inside the card receives a pale background and padding. The note paragraph remains outside that rule’s scope. The CSS still lives in the shared file: scoping and sharing work together.

If you later introduce a nested region with the class nested-sample, you could replace that optional fragment with this one. It is a boundary example; the original page contains no such nested region yet.

/* Alternative optional fragment */
@scope (.shape-card) to (.nested-sample) {
  p {
    padding: 0.5rem;
    background: #edf2f5;
  }
}

The limit excludes the nested region from these selector matches. It does not create complete style isolation: inherited properties such as color and font-family can still pass beyond a scope limit. Keep that distinction in mind when diagnosing a nested element that still resembles its parent. MDN: @scope description.

An explicit root such as .shape-card also makes the dependency clear when CSS is moved between files. The destination document must contain an element with that class. Moving the stylesheet alone cannot supply the required markup.

What are the browser support limits?

MDN currently marks @scope as Baseline 2026, newly available across the latest browser versions since March 2026. Older browsers may lack support. A Mac’s presence on your desk does not establish which CSS features its installed browser supports; check the versions you intend to use against the compatibility information. MDN: @scope browser compatibility.

Keep essential card styling in the ordinary class rules above when older browsers matter. The optional scoped paragraph treatment can then remain an enhancement. CSS error handling allows browsers to discard unsupported content while continuing to process valid CSS, so the presence of a stylesheet does not establish that every rule inside it took effect. MDN: CSS error handling.

For the same paragraph treatment without @scope, give the card paragraph a dedicated class such as shape-card__caption, then target that class in an ordinary rule. This adds a markup hook but avoids relying on native scoping for the result.

Do not add a scoped attribute to a style element expecting the same behavior. The current HTML Standard’s attribute list for that element does not include it. Native CSS scoping uses the @scope rule. HTML Standard: The style element, MDN: @scope syntax.

How do you keep the page portable?

For this example, moving the complete form-study folder preserves the relationship between index.html and shared.css. Moving only the HTML leaves its stylesheet behind. Use this simple dependency contract before handing off or reorganizing an authored page:

  1. Markup: Preserve the component classes and any structure required by its selectors.
  2. Stylesheet: Include the CSS file and keep the HTML link pointed at its location.
  3. Resources: Include any files referenced by the CSS, preserving or updating their paths.
  4. Browser: Keep a supported styling path for the browser versions that will open the page.

The third check becomes important when a component gains fonts or decorative files. MDN documents that relative CSS URLs resolve against the stylesheet URL. Moving declarations into a stylesheet in another folder can therefore change the resource location they identify. MDN: url() CSS function.

For example, if an external stylesheet moves from the project folder into a styles subfolder, a direct declaration referring to url("assets/tile.png") now points inside styles/assets. Update the path or preserve the corresponding directory structure. The working example avoids that dependency by drawing its shape entirely with CSS.

If a single-file handoff is the priority, embed the supplied CSS in a style element inside the document’s head, and remove the stylesheet link. The current example then needs only the HTML file. Keep the same selectors, including any optional explicit-root @scope block. HTML supports embedding a stylesheet through the style element. HTML Standard: The style element.

Check the decision with a move-and-reload test

Make a copy of the complete project folder in another location, then open the copied HTML in your browser. In that copy, change the shape’s background color in shared.css, save it and reload the page. The visible change checks that you edited the stylesheet used by the copied page.

Next, inspect both the card and the note. A successful result preserves the card treatment while leaving the note outside the optional scoped paragraph rule. If the whole page loses its styling, check the CSS filename and link path first. If only the optional treatment is missing, check browser support and the scope root. If an unrelated element changes, inspect selectors that reach beyond the intended component.

When reopening the HTML in TextEdit, use File > Open, then Show Options and Ignore rich text commands if you need to see its source. Apple also documents the setting Display HTML files as HTML code instead of formatted text for future openings. Work with HTML documents in TextEdit on Mac.

Choose embedded CSS when keeping this small page together is the main task. Choose a shared stylesheet when several pages should use the same maintained rules. Add native scoping where its boundaries simplify those rules and browser support permits it. Finish by moving and reopening the actual files: that checks the markup, stylesheet and resource relationships your chosen arrangement depends on.

Sources