---
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 `<style>` block will be scoped to that component.
This works by adding a class to affected elements, which is based on a hash of the component styles (e.g. `svelte-123xyz` ).
```svelte
< style >
p {
/* this will only affect < p > elements in this component */
color: burlywood;
}
< / style >
```
## :global(...)
To apply styles to a single selector globally, use the `:global(...)` modifier:
```svelte
< style >
:global(body) {
/* applies to < body > */
margin: 0;
}
div :global(strong) {
/* applies to all < strong > elements, in any component,
that are inside < div > elements belonging
to this component */
color: goldenrod;
}
p:global(.big.red) {
/* applies to all < p > elements belonging to this component
with `class="big red"` , even if it is applied
programmatically (for example by a library) */
}
< / style >
```
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
< style >
@keyframes -global-my-animation-name {
/* code goes here */
}
< / style >
```
## :global
To apply styles to a group of selectors globally, create a `:global {...}` block:
```svelte
< style >
:global {
/* applies to every < div > in your application */
div { ... }
/* applies to every < p > in your application */
p { ... }
}
.a :global {
/* applies to every `.b .c .d` element, in any component,
that is inside an `.a` element in this component */
.b .c .d {...}
}
< / style >
```
> [!NOTE] The second example above could also be written as an equivalent `.a :global .b .c .d` selector, where everything after the `:global` is unscoped, though the nested form is preferred.
## Nested style tags
There should only be 1 top-level `<style>` tag per component.
However, it is possible to have a `<style>` tag nested inside other elements or logic blocks.
In that case, the `<style>` tag will be inserted as-is into the DOM; no scoping or processing will be done on the `<style>` tag.
```svelte
< div >
< style >
/* this style tag will be inserted as-is */
div {
/* this will apply to all `<div>` elements in the DOM */
color: red;
}
< / style >
< / div >
```
## class:_name_
```svelte
<!-- - copy: false - -->
class:name={value}
```
```svelte
<!-- - copy: false - -->
class:name
```
A `class:` directive provides a shorter way of toggling a class on an element.
```svelte
<!-- These are equivalent -->
< div class = {isActive ? ' active ' : ' ' } > ...< / div >
< div class:active = {isActive} > ...< / div >
<!-- Shorthand, for when name and value match -->
< div class:active > ...< / div >
<!-- Multiple class toggles can be included -->
< div class:active class:inactive = {!active} class:isAdmin > ...< / div >
```
## style:_property_
```svelte
<!-- - copy: false - -->
style:property={value}
```
```svelte
<!-- - copy: false - -->
style:property="value"
```
```svelte
<!-- - copy: false - -->
style:property
```
The `style:` directive provides a shorthand for setting multiple styles on an element.
```svelte
<!-- These are equivalent -->
< div style:color = "red" > ...< / div >
< div style = "color: red;" > ...< / div >
<!-- Variables can be used -->
< div style:color = {myColor} > ...< / div >
<!-- Shorthand, for when property and variable name match -->
< div style:color > ...< / div >
<!-- Multiple styles can be included -->
< div style:color style:width = "12rem" style:background-color = {darkMode ? ' black ' : ' white ' } > ...< / div >
<!-- Styles can be marked as important -->
< div style:color | important = "red" > ...< / div >
```
When `style:` directives are combined with `style` attributes, the directives will take precedence:
```svelte
< div style = "color: blue;" style:color = "red" > This will be red< / div >
```
## --style-props
```svelte
<!-- - copy: false - -->
--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
< Slider bind:value min = {0} --rail-color = "black" --track-color = "rgb(0, 0, 255)" / >
```
Desugars to this:
```svelte
< div style = "display: contents; --rail-color: black; --track-color: rgb(0, 0, 255)" >
< Slider bind:value min = {0} max = {100} / >
< / div >
```
For SVG namespace, the example above desugars into using `<g>` instead:
```svelte
< g style = "--rail-color: black; --track-color: rgb(0, 0, 255)" >
< Slider bind:value min = {0} max = {100} / >
< / g >
```
> [!NOTE] Since this is an extra `<div>` (or `<g>`), 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
< style >
.potato-slider-rail {
background-color: var(--rail-color, var(--theme-color, 'purple'));
}
< / style >
```
So you can set a high-level theme color:
```css
/* global.css */
html {
--theme-color: black;
}
```
Or override it at the consumer level:
```svelte
< Slider --rail-color = "goldenrod" / >
```
