Skip to main content

CSS

With Typing, you can easily apply CSS styles or classes to note types.

Applying CSS Classes to Notes

By default in Obsidian, CSS classes for a specific note can be assigned through its frontmatter like this:

---
cssClasses: ["class-one", "class-two"]
---

In Typing, you can extend this functionality to apply CSS classes to an entire note type. Here's how:

type TypeName {
style {
css_classes = ["class-one", "class-two"]
}
}

When you set it this way, the specified classes will be automatically applied to all notes of the type TypeName.

Direct CSS Styling

Beyond just classes, Typing also allows you to directly integrate CSS code into your notes:

type TypeName {
style {
css = css"""
& a {
text-decoration: underline
}
"""
}
}

This css attribute utilizes emotion for rendering. For advanced styling techniques and nuances, refer to the emotion documentation.