# How to Use cssclasses in Obsidian for Custom Note Styling

> Learn to use Obsidian cssclasses frontmatter to apply custom CSS styles to individual notes. Easily target specific notes with CSS snippets for unique vault customization.

- Repository: [Steph Ango/obsidian-skills](https://github.com/kepano/obsidian-skills)
- Tags: how-to-guide
- Published: 2026-03-24

---

**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](https://github.com/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`](https://github.com/kepano/obsidian-skills/blob/main/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.

```markdown
---
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`](https://github.com/kepano/obsidian-skills/blob/main/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`:

```css
/* 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:

```css
.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:

```markdown
<%*
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`](https://github.com/kepano/obsidian-skills/blob/main/skills/obsidian-markdown/references/PROPERTIES.md) and [`skills/obsidian-markdown/SKILL.md`](https://github.com/kepano/obsidian-skills/blob/main/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`](https://github.com/kepano/obsidian-skills/blob/main/skills/obsidian-markdown/references/PROPERTIES.md) provides the reference specification, while [`skills/obsidian-markdown/SKILL.md`](https://github.com/kepano/obsidian-skills/blob/main/skills/obsidian-markdown/SKILL.md) demonstrates practical examples of front‑matter usage including `cssclasses` in context.