Working with CSS in Obsidian

I have been using obsidian for several months as a personal knowledge base, research, and writing tool. I have also recently started to also use Obsidian for managing small projects.

The key benefits that I have found to date are,

• Automatic internal linking (wiki links)
• Powerful search
• Plugin support
• Storage using plain text files

While I do not (at least at this stage) plan to Obsidian as a task manager with workflow (as many others appear to be). I have been setting up a dashboard to provide a landing page for my knowledge management system. In this brief post, I will describe the CSS formatting features available in Obsidian.

CSS

Cascading Style Sheets (CSS) is one of the key technologies used to develop websites and applications on the modern Internet. The others are HTML and JavaScript.

HTML contains the content (in some applications this can also be XML), CSS defines the styling (i.e. the visual appearance of the content) and JavaScript is used to add dynamic or interactive aspects.

Obsidian is built using Electron, which is an application development environment that allows developers to create web content that is hosted on a desktop computer and appears to be a desktop application.

Due to Obsidian being built using Electron, CSS can be used to specify the visual appearance of notes. The Obsidian developers have made the CSS accessible to end users via two mechanisms, which will be described below.

Syntax

A CSS file consists of a list of CSS rules.

The syntax of a CSS rule is a selector followed by one or more declarations enclosed in brackets {}. An example of a CSS rule is shown below,

h1 {  
    color: red;  
    text-align: center;
}

In the rule above,

• The selector is h1 (Heading 1)
• There are two declarations. The first defines the color to be red and the second will center the text

Themes

Obsidian allows for every facet of the visual appearance to be specified in a large…