CSS für Obsidian - # isn't <h1>

[RolWg]

Hello together,

I would like to format text with the file vault/.obsidian/snippets/style.css.
I get a few results with normal elements and classes in html-css (although: why is .h1 {text-decoration: underline;} boxed and not underlined?).
But my real problem is how to format the Markdown heading ‘#’ (and all further layers) in the CSS file.
Thanks for hints.

[ush]

You can find which selector to target by inspecting the DOM. Here’s a guide:

Getting comfortable with Obsidian CSS

While using Obsidian, if you press CTRL-SHIFT-I (option-cmd-i for mac) then it will bring up the developer window. In the developer window, at the top left is an icon with a pointer in a box. This allows you to select elements on the screen and see how to refer to them and what styles. I will occasionally update this post with more pictures of how to do stuff. [Developer Tool] You can hover over items to see what they do and then click on an item to select it. Then go down to the styles secti…

[Jopp]

First, you can name your snippets the way you want, important snippets end with suffix “.css”
Second, post your code so we can help you. Probably you can’t see the underline because of the box border. if something doesn’t work add “!important”, eg. text-decoration: underline !important;.

Note: Don’t abuse the !important command.

Try this:

h1,
.markdown-rendered h1 {
border: 0;
font-size: 4em;
text-decoration: underline;
}

[RolWg]

Oha!
O.K., somehow seems I expected that a previously unknown CSS element ‘’#" would appear with the same function as “h1”.
Could have guessed that it wouldn’t be quite that simple
The ‘element’ is called “span.cm-header.cm-header-1”
And in the CSS file works fine:

span.cm-header.cm-header-1 {
text-decoration: underline;
}


Thank you for the advice. I didn’t know, that I could analyze Obsidian files the same way I would an HTML page in the browser.

[RolWg]

Oh thanks - of course this would be somehow easier if the “.markdown-rendered h1” class was some kind of translator of the usual CSS. But it’s probably not as easy as it seems. I tried in the same CSS file with

.markdown-rendered h2 {
border: 1;
font-size: 4em;
text-decoration: underline;
}

And nothing happens. Do I have to specify the “.markdown-rendered” anywhere?

[ush]

.markdown-rendered h2 will only work in Reading view. In live preview, we don’t actually have h2. It mimics h2 by div or span.