---
title: Styles & Classes
---
- style scoping
- `:global`
- `style:`
- `class:`
- `--css` props
Styling is a fundamental part of UI components. Svelte helps you style your components with ease, providing useful features out of the box.
## Scoped by default
By default CSS inside a `
```
## :global
To apply styles to a selector globally, use the `:global(...)` modifier.
```svelte
```
If you want to make @keyframes that are accessible globally, you need to prepend your keyframe names with `-global-`.
The `-global-` part will be removed when compiled, and the keyframe will then be referenced using just `my-animation-name` elsewhere in your code.
```svelte
```
## Nested style tags
There should only be 1 top-level `
```
## class:_name_
```svelte
class:name={value}
```
```svelte
class:name
```
A `class:` directive provides a shorter way of toggling a class on an element.
```svelte
...
...
...
...
```
## style:_property_
```svelte
style:property={value}
```
```svelte
style:property="value"
```
```svelte
style:property
```
The `style:` directive provides a shorthand for setting multiple styles on an element.
```svelte
...
...
...
...
...
...
```
When `style:` directives are combined with `style` attributes, the directives will take precedence:
```svelte
This will be red
```
## --style-props
```svelte
--style-props="anycssvalue"
```
You can also pass styles as props to components for the purposes of theming, using CSS custom properties.
Svelte's implementation is essentially syntactic sugar for adding a wrapper element. This example:
```svelte
```
Desugars to this:
```svelte
```
For SVG namespace, the example above desugars into using `` instead:
```svelte
```
> Since this is an extra `` (or ``), beware that your CSS structure might accidentally target this. Be mindful of this added wrapper element when using this feature.
Svelte's CSS Variables support allows for easily themeable components:
```svelte
```
So you can set a high-level theme color:
```css
/* global.css */
html {
--theme-color: black;
}
```
Or override it at the consumer level:
```svelte
```