# Styles

First things first – you are free to use external stylesheets like you've always done. Still, aiming to be the friendliest full-stack language we have included styling as a core part of the language. We've also extended the functionality of css to make common patterns friendlier, and to make it easier to keep a consistent design language across your whole project. Our approach to styling is inspired by [Tailwind](https://tailwindcss.com), so we recommend reading about [their philosophy](https://tailwindcss.com/docs/utility-first).

```imba
css .btn
	display: block
	background: #b2f5ea
	padding-left: 4px
	padding-right: 4px

css .btn@hover
	background: #81e6d9
```
As you can see from the snippet above, the syntax of styles in imba are very similar to css, just without braces and semi-colon. At the same time, Imba includes powerful shorthands and [style modifiers](https://imba.io/docs/css/modifiers) to allow the css above to be written like:

```imba
css .btn d:block px:1 bg:teal2 bg@hover:teal3
```

## Further reading

<doc-pages></doc-pages>