There's a moment every Obsidian user hits eventually. You love your theme, but there's one thing that bugs you. Headings are too small. Callouts feel cramped. The editor line width is set for a 4K monitor and you're on a laptop. Swapping themes to fix a single annoyance feels like buying a new car because you didn't like the radio station.
CSS snippets are the fix. A snippet is just a .css file that Obsidian layers on top of whatever theme you're running. You change one thing, leave everything else alone, and toggle it on or off whenever you want. No plugin, no theme fork, no build step.
Getting your first snippet running
Open Settings, go to Appearance, scroll to the CSS snippets section, and click the folder icon to open the snippets folder. It lives at .obsidian/snippets inside your vault. Drop a .css file in there, click the reload icon back in settings, and flip the toggle on.
Here's a snippet worth starting with. Obsidian exposes a CSS variable for the editor's maximum line width, and the default is often too wide for comfortable reading:
.markdown-source-view,
.markdown-preview-view {
--file-line-width: 750px;
}Save the file. Obsidian watches the snippets folder and applies changes the moment you hit save, so you get a live-preview loop: tweak the number, save, watch the editor reflow. That feedback cycle is what makes snippets fun instead of fiddly.
Lean on the variables, not brute force
The thing that trips people up is reaching for raw selectors and !important when Obsidian already hands you a variable. The app is built on a large set of CSS custom properties, and overriding those is almost always cleaner than fighting the theme's own rules.
Want to recolor and resize your headings? There are variables for each level:
body {
--h1-color: #e06c75;
--h1-size: 2.2em;
--h2-color: #61afef;
--h3-color: #98c379;
}Because these are variables the theme itself reads, your override slots into the same cascade the theme uses, so it survives light and dark mode and doesn't get clobbered by a specificity war. If you do need to distinguish schemes, scope the rule with .theme-dark or .theme-light:
.theme-dark {
--text-normal: #dcddde;
--background-primary: #1e1e1e;
}A quick way to discover what's available: open the developer tools with Cmd/Ctrl+Shift+I, inspect an element, and look for the -- variables in the styles panel. Anything you see there is fair game to override in a snippet.
Target specific notes with cssclasses
Global snippets are great, but sometimes you want styling that applies to one note or a category of notes, not the whole vault. That's what the cssclasses property is for. Add it to a note's frontmatter:
---
cssclasses:
- wide-tables
---Then write a snippet scoped to that class. Everything under .wide-tables only affects notes carrying that property:
.wide-tables table {
width: 100%;
font-size: 0.85em;
}Now a note full of reference tables can go full-width while your writing notes stay narrow and readable. This pairs nicely with a Templater setup: bake the cssclasses value into your meeting-notes or reading-log template and the styling comes along automatically.
When to graduate to Style Settings
If you find yourself editing hex codes by hand every time you want to tweak a color, install the Style Settings community plugin. It reads special comment blocks in your snippets and turns them into real toggles and color pickers in the settings UI. You annotate a snippet once with a /* @settings */ block of YAML, and from then on you adjust it with sliders instead of reopening the file. It's the natural next step once a snippet has more than one or two knobs you keep reaching for.
Start small. Pick the one thing about your vault that's been quietly annoying you, find the variable behind it, and write three lines to fix it. Snippets are the lowest-commitment way to make Obsidian feel like yours, and unlike a theme swap, you can always just toggle them off. The official CSS snippets guide and the developer docs on styling are the best places to go deeper.