CSS Snippets change the way things look and work in Obsidian. They are text files generally with a \*.css extension.
Generally, you will find people install themes and those themes sometimes come with additional \*.css helpers that allow you to cool things.
<iframe width="1280" height="720" src="https://www.youtube.com/embed/9cXIhlr0eJU" title="Obsidian - Custom CSS Installation" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
**For example:** A very common question is how do you get the Wiki style tables on the right hand side of your notes? The answer to this question is to use the ITS Theme as it's the ITS Theme that includes the \*.css file that enables the functionality. Sometimes though, people don't want to use the ITS Theme. They have already picked a theme and they want to keep using it, but they also want the Wiki style tables.
The good news is you can absolutely copy \*.css files from one theme to another, or you can write your own \*.css or you can download \*.css from the internet and use that.
This is where \*.css files are very powerful. They are effectively just Text Files with a \*.css extension.
You need to put them in: `YourVault/.obsidian/snippets`
Then you need to enable them: `Obsidian > Settings > Appearance > CSS Snippets > Enable`
Here's the example image used in the video.
Try enable theS - Image Adjustments.css and watch the impact to this image.
Source: https://github.com/SlRvb/Obsidian--ITS-Theme/blob/main/Snippets/S%20-%20Images%20Adjustments.css
![[Pasted image 20221022225753.png]]
Try enable the Minimal_Circe.css and watch the impact to this image.
Source: https://github.com/kepano/obsidian-minimal/blob/master/obsidian.css
![[Pasted image 20221022225753.png#circle]]
As you enable different \*.css you should see the changes happen.
There's not way to share all the \*.css that exists nor can I demo you them all. But just into the Themes and shop around for effect you like.