Add a simple `CSS snippets tutorial` page if possible or make existing documentation more informative about how `cssclasses` work

[magma-chili]

trafficstars

What is your suggestion?

Recently, I observed a user having trouble applying a CSS snippet they found on GitHub which was discussed in the OMG discord #general chat. This user did not understand that the cssclasses property entry did not require the .css file extension of the file they downloaded when trying to apply the CSS snippet to a markdown file in their vault.

A simple tutorial example could be changing the highlight color. I used a snippet called "MySnippet.css" and enabling it inserted a CSS class called MySnippet which allowed targeting using the cssclasses property.

.markdown-source-view.MySnippet .cm-highlight,
.MySnippet mark {
  background-color: red;
}

What is the use case?

While the repo this user downloaded from could have included clearer instructions in its README file about how to apply the CSS snippet to individual markdown files, I think it might be helpful to create a step-by-step example tutorial for newcomers to follow for applying custom CSS snippets to markdown files.

I think the tutorial, or another page, should also explain the difference between global CSS snippets that apply everywhere vs snippets that apply only when added to the cssclasses property of specific files; for example, it would be elucidating to go into detail about how class names based on enabled snippets are inserted into the DOM when snippets are enabled, or, if this information already exists elsewhere in the help docs, I think that information should be linked to or moved to the CSS snippets help page.

[colintedford]

Yeah, if I remember right the only documentation of cssclasses is that it exists, not even what it does, so there's some low-hanging fruit.

[trainbuffer]

I've seen asked multiple times "how can I remove the inline title for certain notes?" Of course the docs can't cover everything folks would like to do, but this could be a good and simple example demonstrating how cssclasses work.

.no-inline .inline-title {
    display: none;
}