Getting started with CSS

[iPanini]

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;
}

etc.

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!

[ariehen]

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

Obsidian CSS Quick Guide

Obsidian CSS Quick Guide Hi friends! CSS in Obsidian can be confusing to get into, so this is a guide to get you started with information on the tools, methods, and some background knowledge! Let’s get started by looking at how you can look behind the curtain of Obsidian’s visuals. The Developer Console Obsidian is technically like a website. As such, you can view the source like any other browser. While you are inside the Obsidian window, you can press ctrl+shift+i to bring up the develope…

and

CSS variables - Developer Documentation

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.

[iPanini]

Works a ton!

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