%%
date:: [[2024-04-21]]
parent::
%%
# [[How to add a CSS snippet in Obsidian]]
![[How to add a CSS snippet in Obsidian.svg]]
[[obsidian-playbook/Using Obsidian/01 First steps with Obsidian/Obsidian|Obsidian]] lets you add [[CSS]] snippets to change the way the UI looks without creating a full-blown theme. Snippets are a great way to introduce minor tweaks.
Here's how to add a CSS snippet:
### Download the CSS snippet
Find (or create) a CSS snippet that you'd like to apply. It should be a `.css` file.
> [!tip] Sample CSS snippet
> If you don't already have one in mind, here's one you can try out: [The Obsidian Notebook Themes](https://github.com/CyanVoxel/Obsidian-Notebook-Themes) by [[CyanVoxel]] lets you manually change the background and font color of a specific note.
### Copy the CSS snippet to your Obsidian vault
Within Obsidian, go to Settings > Appearance and scroll down to the CSS snippets section.
Click on the folder icon. This opens up a folder on your computer where all the CSS snippets should be saved.
Copy over the CSS snippet you downloaded in the previous step to this folder.
### Enable the CSS snippet
Back in Obsidian, go to Settings > Appearance.
Under the CSS snippets section, look for the snippet you copied in the previous step and toggle it to enable it.
### Use the CSS class in your note
CSS snippets, [[Obsidian Themes]], need to be explicitly set. To do this, open up a note you'd like to use the snippet on.
Add the [[Properties in Obsidian|property]] `cssclasses` to the [[YAML Frontmatter]] in Obsidian with the value of the CSS class from the snippet that you'd like to use. If you used the example above, you can add something like this:
```
---
cssclasses:
- page-manila
---
```
> [!question]- Don't know what the CSS class is?
> The value `page-manila` above is the name of the CSS class. What if you don't know what the class is? Many snippets also have more than one CSS class that you can use. How do you know what your options are?
>
> You can find all the CSS classes by opening up the `.css` file. Within that file, look for lines that start with a `.`. In the example above, some CSS classes are `.page-manila`, `.page-blueprint`, `.page-white`.
You need to add the CSS class to every note you'd like to use the snippet on. If you'd like to automate this somewhat, consider incorporating the `cssclasses` property and value within a note template using the [[Templater plugin|Templater]] or [[Templates]] plugins.
%%
# Text Elements
# Drawing
```json
{
"type": "excalidraw",
"version": 2,
"source": "https://github.com/zsviczian/obsidian-excalidraw-plugin/releases/tag/2.1.1",
"elements": [
{
"id": "V7hRAFau",
"type": "text",
"x": 388.5514131784439,
"y": -180.92675018310547,
"width": 3.8599853515625,
"height": 24,
"angle": 0,
"strokeColor": "#1e1e1e",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 2,
"strokeStyle": "solid",
"roughness": 1,
"opacity": 100,
"groupIds": [],
"frameId": null,
"roundness": null,
"seed": 1628134616,
"version": 2,
"versionNonce": 1212942040,
"isDeleted": true,
"boundElements": null,
"updated": 1712048641036,
"link": null,
"locked": false,
"text": "",
"rawText": "",
"fontSize": 20,
"fontFamily": 4,
"textAlign": "left",
"verticalAlign": "top",
"containerId": null,
"originalText": "",
"lineHeight": 1.2
}
],
"appState": {
"theme": "dark",
"viewBackgroundColor": "#ffffff",
"currentItemStrokeColor": "#1e1e1e",
"currentItemBackgroundColor": "transparent",
"currentItemFillStyle": "solid",
"currentItemStrokeWidth": 2,
"currentItemStrokeStyle": "solid",
"currentItemRoughness": 1,
"currentItemOpacity": 100,
"currentItemFontFamily": 4,
"currentItemFontSize": 20,
"currentItemTextAlign": "left",
"currentItemStartArrowhead": null,
"currentItemEndArrowhead": "arrow",
"scrollX": 583.2388916015625,
"scrollY": 573.6323852539062,
"zoom": {
"value": 1
},
"currentItemRoundness": "round",
"gridSize": null,
"gridColor": {
"Bold": "#C9C9C9FF",
"Regular": "#EDEDEDFF"
},
"currentStrokeOptions": null,
"previousGridSize": null,
"frameRendering": {
"enabled": true,
"clip": true,
"name": true,
"outline": true
}
},
"files": {}
}
```
%%