Getting started with CSS

Hi everyone,

I’m trying to get going with using CSS snippets.
I realize that themes and plugins can sometimes be in the way. I have also learned about the Developper Tools, so I know where to find and how to activate. I’m however in no way experienced in using these.

What I’d like to achieve:
I would like to get a grip on the looks of my obsidian h1, h2, h3
I think, but I’m not sure if I understand correctly, that there is a main css section and next to that there are your own css snippets

I’ve come to this conclusion doing various searches and by experimenting with css snippets.
Hence I know that if I create a snippet, I need to then go into obsidian > settings > appearance > CSS snippets then enable the individual snippet and also click refresh to have obsidian reload CSS snippets.

What I’m trying to do

My h1 snippet:
font-size: 4em;
color: red;

If I could get this to work, I would then e.g. create:
h2 snippet
font-size: 3em;
color: blue;


What I see as a result:

  • headings h1, h2 etc work as far as size goes (I think it is the default behaviour but not my snippet)
  • setting a custom color for h1, h2 does not work

I have tried to disable all plugins, built in and community to no avail.

Thanks for helping out / pointing to a good & working example!

If you’ve got creating CSS snippets down, have a look at:


For editing and rendered (reading) modes, you could use something like this (wrapping the theme variables in body {} to cover light and dark modes):

body {
    --h1-color: red;
    --h2-color: blue;
    --h1-size: 4em;
    --h2-size: 3em;

The variables don’t work with all themes - sometimes you need to be more specific - but they will work with most themes.

1 Like

Works a ton!

How simple can it be! (If you know…)
Thanks for sharing!

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.