How to Apply Specific CSS to Notes

Hello, everyone.

I created a CSS to facilitate reading in a type of text file that I use most in Obsidian; however, while the visibility of the text became excellent for this type, it negatively affected other types of notes.

From what I understood from some videos I watched, it is possible to enable a specific CSS for certain notes, but, as expected, with my nonexistent knowledge on the subject, I couldn’t do it on my own. If possible, I would like to enable the CSS directly in the note or through templates.

I would appreciate any help you can provide.

Thanks

You can add this to your frontmatter in obsidian:

cssclasses: []

Read more here: Properties - Obsidian Help

In your CSS file you will want to give it a unique class like .text or whatever you want to call it and then in your properties/frontmatter/YAML you will want to have text (or whatever you call it) so it looks like this:

cssclasses: ["text"]

That will apply that CSS to only the files that have this text css class and not every single file in your vault.

Unfortunately, I couldn’t do it… The moment I activate the CSS, it automatically applies to all my notes.
Perhaps the way/structure I created the CSS is not appropriate, since I don’t understand anything about it and just pieced together parts I found on the forum.
Here is the CSS I am using:

.cm-line {
    line-height: 1.25em;
}

/* Default styles for light mode */
ul li, ol li {
    font-size: 0.8em; /* Applies the font size to all list items */
    color: #3A3A49;   /* Sets the text color */
    --bold-color: #E59D74;
    --italic-color: #9D4A4A;
    --bold-modifier: 100;
}

/* Specific styles for dark mode */
@media (prefers-color-scheme: dark) {
    ul li, ol li {
        color: #ABABAB;  /* Text color for dark mode */
        --bold-color: #FEDCB8;
        --italic-color: #D5A5A5;
        --bold-modifier: 100;
    }
}

/* Top and bottom spacing for lists */
.markdown-rendered p {
    margin-bottom: 0px;
}

ul.has-list-bullet {
    margin-top: 0px;
}

ol {
    margin-top: 0px;
}

/* Spacing below a heading */
:root :is(h1,h2,h3,h4,h5,h6) {
    margin-bottom: 50px;
}

:root div:has(:is(h1,h2,h3,h4,h5,h6)) + div > p {
    margin-top: 0px;
}

.cm-s-obsidian pre.HyperMD-list-line {
    padding-left: 25px !important;
}

/* Font size for live preview list */
.theme-light .HyperMD-list-line {
    font-size: 0.65em;
    color: #3A3A49;   /* Sets the text color */
    --bold-color: #E59D74;
    --italic-color: #9D4A4A;
    --bold-modifier: 100;
}

.theme-dark .HyperMD-list-line {
    font-size: 0.65em;
    color: #ABABAB;  /* Text color for dark mode */
    --bold-color: #FEDCB8;
    --italic-color: #D5A5A5;
    --bold-modifier: 10;
}

In this case, I would like to apply the changes related to the lists only in certain notes.

Is there any step-by-step guide in text or video on how I should do this?

Thanks

That’s because you didn’t give it a class. I recommend reading up on CSS Classes: The Beginner's Guide to CSS Classes & .class Selectors

Anyway, you need to add a class like .text as I said in my last post. You do not have that anywhere in your code.

Here is your code with a class (I just used .text). If you want to learn, look at the differences between your code you provided and this code here. If you don’t care, just copy and paste it and use .text on those pages you want to have the special CSS. I recommend learning though.

.cm-line .text {
    line-height: 1.25em;
}

/* Default styles for light mode */
ul li, ol li .text {
    font-size: 0.8em; /* Applies the font size to all list items */
    color: #3A3A49;   /* Sets the text color */
    --bold-color: #E59D74;
    --italic-color: #9D4A4A;
    --bold-modifier: 100;
}

/* Specific styles for dark mode */
@media (prefers-color-scheme: dark) {
    ul li, ol li .text {
        color: #ABABAB;  /* Text color for dark mode */
        --bold-color: #FEDCB8;
        --italic-color: #D5A5A5;
        --bold-modifier: 100;
    }
}

/* Top and bottom spacing for lists */
.markdown-rendered p  .text {
    margin-bottom: 0px;
}

ul.has-list-bullet .text {
    margin-top: 0px;
}

ol  .text {
    margin-top: 0px;
}

/* Spacing below a heading */
:root :is(h1,h2,h3,h4,h5,h6)  .text {
    margin-bottom: 50px;
}

:root div:has(:is(h1,h2,h3,h4,h5,h6)) + div > p  .text {
    margin-top: 0px;
}

.cm-s-obsidian pre.HyperMD-list-line  .text {
    padding-left: 25px !important;
}

/* Font size for live preview list */
.theme-light .HyperMD-list-line  .text {
    font-size: 0.65em;
    color: #3A3A49;   /* Sets the text color */
    --bold-color: #E59D74;
    --italic-color: #9D4A4A;
    --bold-modifier: 100;
}

.theme-dark .HyperMD-list-line  .text {
    font-size: 0.65em;
    color: #ABABAB;  /* Text color for dark mode */
    --bold-color: #FEDCB8;
    --italic-color: #D5A5A5;
    --bold-modifier: 10;
}

I don’t recommend messing with CSS unless you know what you are doing.