How to use CSS snippets in Obsidian

Cascading style sheet (CSS) snippets help you add custom styles to an Obsidian vault. They are powerful tools that help define different parts of the user interface, such as the color, position, and size of elements. Learning how to use CSS snippets in Obsidian means you can create a custom look, allowing Obsidian to become closer to your work style and personality. This can improve your overall experience and productivity. Continue reading to learn how to use CSS snippets in Obsidian.

Add Obsidian Shards

The first part of using CSS snippets is adding them. Different customizations and styles allow you to create a visually attractive and functional workspace. Using snippets makes note-taking rewarding and fun. In case you don’t already know, here’s how you add shards to your vault:

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

Using CSS Snippets in Obsidian

In Obsidian, using CSS snippets helps to override or complement different broader themes that you apply to the product. To use fragments:

1. Add a file called .css to .obsidian/snippets.
   
2. Navigate to the “Appearance” option.
   
3. Update.
   
4. Choose the resulting file with a switch.
   

Style obsidian using CSS snippets

CSS snippets are an integral part of Obsidian because they describe how each part of the vault should appear. These snippets allow you to customize virtually all of Obsidian’s features to match your preferences. There are several options when it comes to the style of Obsidian.

Use selectors to choose a style

Deciding what style to style them requires “selectors.” This allows you to identify the part you need to design. Selectors are usually nested and you need to be specific. If you design “quote font”, choose that exactly. Generally, selecting “quotes” changes the appearance of block quotes in each part of the application.

Use properties to style the selection

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

Use the statement to give instructions

A “declaration” is used to give instructions. This includes the selector (what needs styling), the properties that need styling (the parts that need to change), and the new property values ​​(the look you want). For example, if you want all the text inside the editor to be red, it’s like saying, “Obsidian, find all the text inside 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 a selector. {} contains the properties that should be styled, while the color represents the property and red is the desired value. The value relationships for all properties are displayed with the property followed by a colon, value, and a semicolon to end the line. Properties should be one hyphen away from the sector to easily differentiate them.

Separating the declaration into rows is optional, but it can help you change many different elements and aspects.

The interpretation of CSS is sequential, with the last declarations taking precedence over all others that precede it.

Use classes to select what to style

“Classes” are used to select what you need to design. Classes are described as aggregate attributes of the underlying structure of the application. They can be selected using selectors. .markdown-source-view Identifies the application content that is open to an Editor view. An earlier dot in object names denotes classes.

Target elements

The “elements” also need an orientation, depending on the style being designed. These are structural parts of the application. Paragraphs can be indented using a “p” element selector. No prior punctuation is used to describe items.

Use logic in selectors to increase specificity

Using a space increases specificity when selecting offspring: “grandfather father-son” selects the father’s son who is the grandfather’s son. For example, .markdown font view block quote select block quotes within edit mode panels.

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

A comma is a logical “or” separator. For example, entering “blockquote,pre” points to the elements “blockquote” and “pre”.

You can refer to Mozilla’s guide to CSSsince most of the logic applies to obsidian.

Save style declarations

When creating complete themes, save them in VAULT/.obsidian/themes. This should have a unique name and be found under Settings > Appearance > Theme in Obsidian. Tap the “Reload Themes” option if it is not detected. If the adjustments are made to an existing theme and are small, save them to VAULT/.obsidian/snippets.

Customizing Obsidian Themes Using CSS Snippets

Obsidian has themes that allow you to make changes. You can choose to continue testing one theme at a time or create custom CSS to suit your needs using DevTool.

Check the “Apply CSS Snippet” option

This is where you start, and it is to enable custom CSS. This allows Obsidian to read the code and then override 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 in (directory)” option.
   

This will direct the application to the CSS file located 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 out of Obsidian using CSS snippets

Obsidian opens up many possibilities. To get the most out of it, you should try something additional that makes using it more exciting and rewarding. Creating your themes using CSS may be all you need. To do so, you must first enable CSS snippets in Obsidian via the settings menu. CSS allows you to modify the style and add new values. You can achieve a lot more and play around with the use of CSS snippets.

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