---
title: Scoped styles
description: How a <style> block in a .tsrx file becomes CSS that matches only the elements of that file.
sidebar: { label: Styles }
---

Last page, `Badge` rendered `<strong class="badge">`. Now we give that class some CSS.

Two files both use the class `.title`. With a plain stylesheet, one rule paints both. Markless stops that at build time.

Put a `<style>` block inside a component's markup. The compiler makes a class name from the file's path, such as `mk-1iop1i3`. It adds that class to each selector in the block and to every element the file renders.

Click **Plain stylesheet**, then **Style block in Card.tsrx**.

<CompScopeFigure />

Notice that the scoped rule paints only the `h2` in `Card.tsrx`.

## Write a style block

```tsrx Counter.tsrx
import { state } from '@markless/core';

export default function Counter() @{
	let count = state(0);

	<section class="card">
		<style>
			.card > h2 { color: rebeccapurple; }
			@media (min-width: 40rem) { h2 { font-size: 2rem; } }
		</style>
		<h2>Count {count}</h2>
		<button onClick={() => count++}>+1</button>
	</section>
}
```

For `src/Counter.tsrx`, the compiler turns that block into this CSS:

```css
.card > h2.mk-1iop1i3 { color: rebeccapurple; }
@media (min-width: 40rem) { h2.mk-1iop1i3 { font-size: 2rem; } }
```

The `<section>`, `<h2>`, and `<button>` each get the class `mk-1iop1i3` too. Rules inside `@media` get the class. `@keyframes` stay as you wrote them.

If you pass a `class` prop to a child component, it carries your file's class. So your rules reach the element the child puts that class on.

:::warning[Why does my rule reach another component in the same file?]
The class comes from the file, not the component. All components in one `.tsrx` file share one class and one stylesheet. Move a component to its own file to give it its own scope.
:::

:::warning[Why did my style block vanish?]
A `<style>` block outside any component markup never reaches the page. The compiler warns with `MARKLESS_PUBLIC_RENDER_UNSUPPORTED_CONSTRUCT`. Move the block inside the markup. For rules that cover the whole site, import a normal stylesheet.
:::

**Coming from another framework?**

This works like scoped styles in single-file components. Each file gets one class, added to selectors and elements at build time.

**Next:** `count` sits in every example so far. Where does it come from? [State →](/state/state)