Apply CSS only to the specified page

[onurusluca]

What version of starlight are you using?

0.11.2

What is your idea?

I wanted have a larger column for one of my pages so added this(as stated [here](https://starlight.astro.build/guides/css-and-tailwind

/#custom-css-styles)):
:root {
    --sl-content-width: 100%;
}

But the styles are applied everywhere even though I only want to have it in pages I want it. This of course applies to other styling as well.

Is there way to do this? If not, it'd be great to have it!

Maybe we can have an id or class for the page that we can select and apply CSS? Or maybe we can add styling to the header of the page?

Why is this feature necessary?

Because we sometimes need a custom styling for some pages only, not all.

Do you have examples of this feature in other projects?

No response

Participation

• I am willing to submit a pull request for this feature.

[HiDeoo]

I think there were discussions at some point regarding adding a data attribute, e.g. data-route or data-slug, to each pages. This could potentially be one solution to the issue by allowing to target one or multiple specific page(s) with CSS with something like [data-route="manual-setup"] { ... }.

[delucis]

Yeah, this definitely came up in a discussion once. I'm curious if anyone has other ideas — it's a nice solution for one or two pages, but maybe less fun if you're applying some custom style to many pages.

[onurusluca]

Definitely will be too much work to do this for many pages but the default styles will be applied as they are, additionally we'll set custom styles with higher specificity.
I was thinking maybe we can link to certain css files ok config file? I don't know I think we need this.

[delucis]

As a workaround, I believe you should be able to provide styles in the head frontmatter property for that page:

---
title: Page with custom styles
head:
  - tag: style
    content: ":root { --sl-content-width: 100%; }"
---

[onurusluca]

I tried this but it doesn't work for me.

edit: it worked with important!

---
title: Page with custom styles
head:
  - tag: style
    content: ":root { --sl-content-width: 100% !important; }"
--- 

If we can do this, I think this is fine lol :D
Is this in the docs? I couldn't find. If not I'd be willing to add a description.

Reproduction
Go to example guide, add or remove !important to content: ":root { --sl-content-width: 100%; }"

[delucis]

Ah yeah, these head tags are added before Starlight’s own CSS, so in the cascade, the default style wins. !important or any other way to increase specificity should work, like :root:is(:root) { ... }.

[delucis]

This isn’t documented and I might hold off for now. We’re currently discussing switching to @layer for styles (#1048), which would also improve the experience here — Starlight’s styles would be in @layer, so user styles in places like this wouldn’t need any extra work to override them.