Getting comfortable with Obsidian CSS

You make some good points here @goodsignal, so I’d just like to clarify some of it for you.
Firstly, I don’t think anything in css can break the app or your notes. Css is just presentation and can’t really affect any data. So feel free to experiment! Go nuts!
If you’ve been playing around with the css in the dev tools and gotten lost and things look broken or wrong, a quick reload (ctrl+r I think) or closing and opening Obsidian should fix it.
If you mess up your obsidian.css you can always delete or replace it.

As for transferring your changes to your obsidian.css so that they stick, this is where you start learning about css rules and things get tricky. In general you can copy the rules from the styles panel which you change.
It’s a little more complicated than that, though. Css rules and selectors and classes is a whole topic. When starting out, it’s probably best to try and copy what’s there.

This obviously is not all you need to know. For instance with your indentation example, the css is on the element itself, and not actually part of the css rules. This makes it difficult to style. You’ll have to figure out what rule applies to that element and then also mark any styles you create as !important.
CSS rules apply in order of what is most specific, and anything in the “styles” section of an element is most specific, with !important being a hacky override.

This is just scratching the surface, but hopefully it’s enough to get started…

8 Likes