--- 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 single 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 ``` ## :global To apply styles to a group of selectors globally, create a `:global {...}` block: ```svelte ``` > 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 ` ``` ## 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 ```