How to Use CSS Snippets in Obsidian

Cascading style sheets (CSS) snippets help you to add custom styles to an Obsidian vault. They are powerful tools that help define different user interface parts, like the color, position, and size of the elements. Learning to use CSS snippets in Obsidian means you can create a personalized look, allowing Obsidian to be closer to your work style and personality. This can enhance your experience and productivity overall. Read on to learn how to use the CSS snippets on Obsidian.

Adding Snippets in Obsidian

The first part of using CSS snippets is to add them. Different customizations and styles allow you to create a visually appealing and functional workspace. Using snippets makes note-making fulfilling and enjoyable. In case you don’t already know, this is how to add snippets to your vault:

1. Go to “Settings” and open it.
   
2. Choose “Appearance” and select “CSS snippets.
   
3. Select the “Snippets Folder.”
   
4. Create or download the CSS snippets in this folder.
   
5. Open “Snippets” and “Reload.”
   

Using CSS Snippets in Obsidian

In Obsidian, using CSS snippets helps overwrite or complement different larger themes you apply to the product. To use snippets:

1. Add a file called <name>.css to .obsidian/snippets.
   
2. Navigate to the “Appearance” option.
   
3. Refresh.
   
4. Choose the resulting file with a toggle.
   

Styling Obsidian Using CSS Snippets

CSS Snippets are an integral part of Obsidian because they describe how each part of the vault ought to appear. These snippets allow you to customize virtually all characteristics of Obsidian to match your preferences. There are various options as far as styling Obsidian is concerned.

Using Selectors to Pick a Style

Deciding what to style requires “selectors.” This lets you to identify the part you need to style. Selectors are normally nested, and you need to be specific. If styling “quotes typeface,” choose that exactly. Generally, selecting “quotes” changes the look of blockquotes in every part of the app.

Use Properties to Style the Selection

To style your selection, you need to use “Properties,” which are in plenty in CSS. To be specific about the outcome, identify the properties that need editing and give them the target values.

Use Declaration to Give Instructions

To give the instructions, a “declaration” is used. This includes the selector (what needs styling), the properties that need styling (the parts that need changing), and the new values of the properties (the look you want). An example, if you want all text within the editor to be red, it’s like saying: “Obsidian, find all text within the editor, and tell them to turn red.” The CSS declaration should look like this:

.markdown-source-view {
color: red;
}

.markdown-source-view acts as the selector. The {} contain the properties that need to be styled, while color depicts the property, and red is the desired value. The value relationships of all properties are shown with property followed by a colon, value, and a semi-colon to end your line. The properties should be one indent from the sector to differentiate them easily.

Separating the declaration in rows is optional but can help you when changing many different elements and aspects.

The interpretation of CSS is sequential, with the latest declarations ruling over all others preceding it.

Use Classes to Select What to Style

“Classes” are used to select what you need to style. Classes are described as the app’s underlying structure added attributes. They can be targeted using selectors. .markdown-source-view identifies app content that is open to an Editor view. A preceding period in object names denotes classes.

Target Elements

“Elements” need targeting as well, depending on what’s being styled. These are structural app parts. Paragraphs may be indented using a “p” element selector. No preceding punctuation is used to describe elements.

Use Logic in the Selectors to Boost Specificity

Using a space increases the specificity by picking descendants: “grandparent parent-child” selects the child of the parent who is the grandparent’s child. For example, .markdown-source-view blockquote selects blockquotes within the edit mode panes.

If there is a period between the classes, it shows an “and” relationship. For example, entering “.programmer.designer” will pick elements with both “programmer” and “designer” as the class.

A comma is an “or” logic separator. For example, entering “blockquote,pre” targets the “blockquote” and “pre” elements.

You can refer to Mozilla’s guide to CSS, as most of the logic there applies to Obsidian.

Saving the Styling Declarations

When making comprehensive themes, save them under the VAULT/.obsidian/themes. This should be uniquely named and found under Settings> Appearance> Theme in Obsidian. Tap the “Reload themes” option if it’s not detected. If the tweaks are being made to an existing theme and are small, store them under VAULT/.obsidian/snippets.

Customizing Obsidian Themes Using CSS Snippets

Obsidian has themes that allow you to make changes. You may opt to keep trying one theme at a time or create a customized CSS that matches your needs using DevTool.

Check the “Apply CSS Snippet” Option

This is where you start, and that is to enable custom CSS. This allows Obsidian to read the code and then overwrite the default style. The steps below help to enable the custom CSS option.

1. Open the Obsidian app.
   
2. Navigate to “Settings” on your obsidian page (bottom right). This opens the Settings page.
   
3. Select “Appearance” on the settings page.
   
4. At the bottom of the “Appearance” menu, check the “Apply CSS snippet at (directory)” option.
   

This will point the app to the CSS file located that’s in the root directory of the vault. This is read, and the custom CSS code is applied. At this point, there is no CSS file.

Get the Most From Obsidian Using CSS Snippets

Obsidian opens up many possibilities. To get the most out of it, you have to try something extra you make using it more exciting and rewarding. Creating your themes using CSS might be all you need. To do so, you must first enable CSS Snippets in Obsidian through the settings menu. CSS allows you to modify the style and add new values. You can achieve so much more and play around with using CSS snippets.

Have you ever tried using CSS snippets on Obsidian? What was your experience? Please share with us in the comments section below.