# Obsidian CSS Snippets CSS snippets are small `.css` files dropped into `.obsidian/snippets/` inside the [[Obsidian Vault|vault]]. Each one can be toggled on and off individually in **Settings → Appearance → CSS snippets**. They are the right tool for targeted tweaks; [[Obsidian Themes]] are the right tool for a whole new look. Snippets load on top of whatever theme is active, so they survive theme switches. ## Typical uses - Hide interface elements you never use - Widen the editor's readable line length - Restyle specific [[Obsidian Callouts|callout]] types - Tweak [[Obsidian Graph view]] or table rendering ## Per-note styling with cssclasses The `cssclasses` property (see [[Obsidian Properties]]) attaches CSS classes to a single note: ```yaml --- cssclasses: - wide-table --- ``` ```css .wide-table table { width: 100%; } ``` This combination is the cleanest way to give one class of notes (dashboards, indexes) a different layout without touching the rest of the vault. ## Good to know - Snippets are plain CSS, no code execution, so they carry none of the risks that make [[Obsidian Restricted Mode]] exist. - Inspect Obsidian's DOM with the developer tools (`Ctrl/Cmd + Shift + I`) to find the selectors to target; the UI is all HTML. ## References - CSS snippets: https://help.obsidian.md/Extending+Obsidian/CSS+snippets ## Related - [[Obsidian]] - [[Obsidian Themes]] - [[Cascading Style Sheets (CSS)]] - [[Obsidian Vault]] - [[Obsidian Properties]] - [[Obsidian Callouts]]