The Obsidian app uses [Cascading Style Sheets](https://en.wikipedia.org/wiki/CSS) (CSS) to control the design of the user interface. CSS is the same markup language used for websites and web-based apps, which means you can find many resources online to help you learn how to use and edit CSS.
Obsidian includes hundreds of [[CSS variables]] that enable consistently beautiful user interfaces.
## For plugins
By using the built-in CSS variables for you own custom elements, you can create native-looking user interfaces in your plugin that look beautiful and are compatible with community themes.
**styles.css**:
```css
.todo-list {
background-color: var(--background-secondary);
}
```
## For themes and snippets
By overriding the default values for the Obsidian CSS variables, you can create beautiful themes without the need for complex CSS selectors.
**theme.css**:
```css
.theme-dark {
--background-primary: #18004F;
--background-secondary: #220070;
}
.theme-light {
--background-primary: #ECE4FF;
--background-secondary: #D9C9FF;
}
```
To learn more about how to build a theme using CSS variables, refer to [[Build a theme]].