# CSS snippets

Learn how to modify aspects of the Obsidian application's appearance without needing to build a theme.

CSS is a language that controls how HTML looks. By adding CSS snippets, you can change parts of the Obsidian user interface, like the size and color of headings. Obsidian has CSS variables that help you customise the interface easily.

Obsidian looks for CSS snippets inside the vault's configuration folder.

# Adding a snippet

To add a CSS snippet on Desktop , follow these steps:

  1. Open Settings.
  2. Under Appearance → CSS snippets, select Open snippets folder ( ).
  3. In the snippets folder, create a CSS file that contains your snippet.
  4. In Obsidian, under Appearance → CSS snippets, select Reload snippets ( ) to see the snippet in the list.
  5. Enable snippet by clicking the toggle.

To add a CSS snippet on Mobile/Tablet , you can follow these steps:

  1. Open a file manager and find your vault. You can check the vault’s location in Manage vaults… by tapping your vault and looking at the path.
  2. Open the Configuration folder and create a folder called snippets if it doesn’t exist.
  3. Add your CSS snippet to this folder.
  4. Open Obsidian's Settings ().
  5. Select Appearance on the left.
  6. Scroll down to the CSS snippets section.
  7. Tap Reload snippets () to refresh the list.
  8. Tap the toggle to enable the snippet.

Alternately, you can

  • Sync any changes in with your syncing service.
  • Use a community plugin to create a snippet from within Obsidian.

Once enabled, Obsidian will automatically detect changes to CSS snippets and apply them when you save the file.

# Writing CSS for Obsidian

Obsidian offers several methods that make writing CSS easier and more powerful.

It has a host of CSS variables to easily modify parts of Obsidian and a built-in property type to change the appearance of one or several notes.

To ensure that the CSS file is valid and formatted correctly, we advise creating and editing it with a program like Visual Studio Code or Sublime Text, as invalid CSS will not work.

# Learn more