How to Use cssclasses in Obsidian for Custom Note Styling

Obsidian's cssclasses front‑matter property lets you attach custom CSS class names to individual notes, enabling targeted styling through CSS snippets without affecting your entire vault.

The cssclasses property bridges the gap between Markdown content and CSS styling in Obsidian. According to the kepano/obsidian-skills repository documentation, this feature allows you to inject arbitrary class names directly into a note's DOM, unlocking per‑document customization while keeping your global theme intact.

How cssclasses Works in Obsidian

When Obsidian renders a note containing the cssclasses property, it parses the YAML front‑matter and injects each class name into the note's root HTML container. In reading view, classes attach to .markdown-preview-view; in the editor, they attach to .cm-content. This mechanism is documented in skills/obsidian-markdown/references/PROPERTIES.md within the obsidian-skills repository, which lists cssclasses among the standard front‑matter properties.

The injection happens per note, meaning you can safely reuse class names across many documents or create highly specific identifiers that never clash with others. Because these classes exist in the DOM, any CSS you place in your Obsidian snippets folder can target them using standard selectors.

Setting Up cssclasses in Your Notes

To use this feature, add a cssclasses key to your YAML front‑matter as a list. The property accepts an array of strings, where each string becomes a CSS class on the note's container.

---
title: Project Overview
tags:
  - work
cssclasses:
  - fancy-header
  - dark-note
---

The above front‑matter attaches the classes fancy-header and dark-note to this specific note.

As shown in skills/obsidian-markdown/SKILL.md, this approach allows you to group notes by visual treatment rather than just content type. You can add as many classes as needed, and Obsidian will apply them all simultaneously.

Creating Targeted CSS Snippets

Once your note declares cssclasses, you must define the corresponding styles in a CSS snippet. Save your CSS file in .obsidian/snippets/ and enable it via Settings → Appearance → CSS snippets.

Styling Note Backgrounds and Typography

This example creates a dark gradient background only for notes using the dark-note class, and decorative headers for fancy-header:

/* Apply gradient background to specific notes */
.dark-note .markdown-preview-view {
  background: linear-gradient(135deg, #2c3e50, #4c5c73);
  color: #f0f0f0;
}

/* Style H1 elements with custom typography */
.fancy-header h1 {
  font-family: "Playfair Display", serif;
  font-size: 2.5rem;
  border-bottom: 2px solid #ff9800;
  padding-bottom: 0.2rem;
}

Scoping Callout Styles

You can also target specific Obsidian components like callouts. This CSS only affects warning callouts in notes that declare the warning-note class:

.warning-note .callout[data-callout="warning"] {
  border-left: 4px solid #e53935;
  background: #ffebee;
}

Dynamically Toggle Classes with Templater

For advanced workflows, you can programmatically modify cssclasses using the Templater plugin. This template checks if the highlight class exists, and toggles it on or off:

<%*
let addClass = tp.file.frontmatter.cssclasses?.includes("highlight") ? null : "highlight";
if (addClass) tp.file.moveFrontMatter({ cssclasses: [...(tp.file.frontmatter.cssclasses||[]), addClass] });
%>

Running this template instantly changes the note's appearance by modifying the front‑matter before the note renders.

Summary

• Front‑matter syntax: Add cssclasses as a YAML list to any note to inject CSS classes into the DOM.
• Targeted styling: Classes attach to .markdown-preview-view (reading mode) and .cm-content (editor), allowing snippet-specific rules.
• Repository reference: The skills/obsidian-markdown/references/PROPERTIES.md and skills/obsidian-markdown/SKILL.md files in kepano/obsidian-skills document the official usage.
• Dynamic control: Combine with Templater scripts to toggle styles programmatically based on note content or metadata.

Frequently Asked Questions

What is the cssclasses property in Obsidian?

The cssclasses property is a YAML front‑matter field that tells Obsidian to add specific CSS class names to a note's HTML container. It accepts a list of strings, and each string becomes a class that you can target with custom CSS snippets.

How do I enable CSS snippets in Obsidian?

Save your CSS files in the .obsidian/snippets/ folder within your vault root. Then open Settings → Appearance → CSS snippets and toggle on the snippets you want to activate. Your cssclasses definitions will only take effect once the corresponding snippet is enabled.

Can I use multiple cssclasses on one note?

Yes. The cssclasses property accepts a YAML list, allowing you to declare multiple classes simultaneously. For example, cssclasses: [class-a, class-b] applies both class-a and class-b to the same note, and all associated CSS rules will cascade accordingly.

Where are cssclasses documented in the obsidian-skills repository?

The property is documented in two locations: skills/obsidian-markdown/references/PROPERTIES.md provides the reference specification, while skills/obsidian-markdown/SKILL.md demonstrates practical examples of front‑matter usage including cssclasses in context.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}