| 1 | --- |
| 2 | relates: |
| 3 | - Vue's Scoped CSS: https://vuejs.org/api/sfc-css-features.html#scoped-css |
| 4 | - UnoCSS directives: https://unocss.dev/transformers/directives |
| 5 | tags: [styling, syntax] |
| 6 | description: | |
| 7 | Define styles for only the current slide. |
| 8 | --- |
| 9 | |
| 10 | # Slide Scope Styles |
| 11 | |
| 12 | You can use the `<style>` tag in your Markdown to define styles for **only the current slide**. |
| 13 | |
| 14 | ```md |
| 15 | # This is Red |
| 16 | |
| 17 | <style> |
| 18 | h1 { |
| 19 | color: red; |
| 20 | } |
| 21 | </style> |
| 22 | |
| 23 | --- |
| 24 | |
| 25 | # Other slides are not affected |
| 26 | ``` |
| 27 | |
| 28 | The `<style>` tag in Markdown is always [scoped](https://vuejs.org/api/sfc-css-features.html#scoped-css). As a result, a selector with a child combinator (`.a > .b`) is unusable as such; see the previous link. To have global styles, check out the [customization section](/custom/directory-structure#style). |
| 29 | |
| 30 | Powered by [UnoCSS](/custom/config-unocss), you can directly use nested css and [directives](https://unocss.dev/transformers/directives): |
| 31 | |
| 32 | ```md |
| 33 | # Slidev |
| 34 | |
| 35 | > Hello **world** |
| 36 | |
| 37 | <style> |
| 38 | blockquote { |
| 39 | strong { |
| 40 | --uno: 'text-teal-500 dark:text-teal-400'; |
| 41 | } |
| 42 | } |
| 43 | </style> |
| 44 | ``` |
| 45 |