> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/sveltejs/svelte/llms.txt
> Use this file to discover all available pages before exploring further.
# Component Styles
> Learn how Svelte scopes CSS to components using hash-based class names, ensuring styles only affect elements within the component.
Svelte components can include a `
This paragraph will be burlywood colored.
```
The compiled output adds the scoping class automatically:
```html theme={null}
This paragraph will be burlywood colored.
```
```css theme={null}
p.svelte-123xyz {
color: burlywood;
}
```
Scoped styles are one of Svelte's most powerful features. The compiler handles all the work of ensuring your component styles don't leak to other parts of your application.
## Specificity
Each scoped selector receives a [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) increase of 0-1-0, as a result of the scoping class (e.g. `.svelte-123xyz`) being added to the selector.
This means that a `p` selector defined in a component will take precedence over a `p` selector defined in a global stylesheet, even if the global stylesheet is loaded later.
```svelte theme={null}
```
```css theme={null}
/* global.css */
p {
/* Specificity: 0-0-1 (element only) */
color: blue;
}
```
In this case, the component's red color wins, even if `global.css` is loaded after the component.
In some cases, the scoping class must be added to a selector multiple times, but after the first occurrence it is added with `:where(.svelte-xyz123)` to avoid increasing specificity further.
## Scoped Keyframes
If a component defines `@keyframes`, the name is scoped to the component using the same hashing approach. Any `animation` rules in the component will be similarly adjusted:
```svelte theme={null}
I bounce!
```
The compiler automatically renames both the `@keyframes` definition and the `animation` reference to something like `bounce-svelte-123xyz`, preventing naming conflicts between components.
## Global Styles
To apply styles globally, use the `:global(...)` modifier:
```svelte theme={null}
```
For global keyframes, prepend your keyframe names with `-global-`:
```svelte theme={null}
```
The `-global-` part will be removed when compiled, and the keyframe will be referenced using just `my-animation-name` elsewhere in your code.