Apply custom CSS to certain pages

I have some pages with prose where in preview mode I don’t want to be distracted by any link colours. I can modify the CSS to produce the effect I want globally, but I’d like to apply the CSS only to certain pages.

One route I’ve considered is applying the effect only to pages with a certain tag, but I’m not sure if this is possible.

Thanks!

1 Like

Ah, answers were available elsewhere if only I knew how to look :slight_smile:

For any page that I want to mark as prose I insert this at the to to define the cssclass:

---
cssclass: prose
---

Then in the css snippets file (or in a css theme file):

.prose a {
  color: var(--text-normal);
  text-decoration: none !important;
}

In this case, I’m setting the link colour to normal text colour and removing the underline. Links will still change colour when I hover over them.

As a bonus, I can have links appear when text is selected with:

.prose a::selection {
  color: var(--text-accent-selected);
}

It’s scary how much Obsidian can be customized. Enough to keep me from doing real work!

4 Likes