# 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 customize the interface easily.

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

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 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.

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.

body {
  --h1-color: red;
  --h2-color: orange;
  --h3-color: yellow;
  --h4-color: green;
  --h5-color: blue;
  --h6-color: pink;
}

.red-border img {
   border-color: #ff0000;
}

cssclasses:
 - red-border

To ensure that the CSS file is valid and formatted correctly, we advise validating it with a tool like CSS Validation Service, as invalid CSS will not work.

• If you're new to CSS, check out Learn to style HTML using CSS by Mozilla.
• For more information about styling Obsidian, see:
  • About styling
  • Build a theme
  • Build a Publish theme
  • Obsidian CSS Inspector workflow