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

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.

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


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:

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

O.K., somehow seems I expected that a previously unknown CSS element ‘’#" would appear with the same function as “h1”. :wink:
Could have guessed that it wouldn’t be quite that simple :slight_smile:
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.


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?

.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.

1 Like

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