--- title: Styling description: How to style your Jaspr website. --- --- Jaspr is highly flexible when it comes to styling. Write your own styles, or reference local and external stylesheets. You can use Jasprs own type-safe CSS-in-Dart styling system or integrate CSS frameworks to style your website. ## CSS-in-Dart Jaspr gives you a strongly-typed styles system that wraps the most common css properties. You can access these various properties through the [`Styles`](/api/utils/styles) class that is exported by the core package. When defining styles like this, you can use them to write component-level styles, global styles, or set inline styles for html elements. ### Component Styles The recommended approach is to define your styles inside your components for better locality of your code: ```dart lib/app.dart class App extends StatelessComponent { const App({super.key}); @override Component build(BuildContext context) { return div(classes: 'main', [ p([.text('Hello World')]), ]); } @css static List get styles => [ css('.main', [ css('&').styles( width: 100.px, padding: Padding.all(10.rem), ), css('p').styles( color: Colors.blue, ), ]), ]; } ``` Read more about this approach in the documentation for [@css](/api/utils/at_css). **Tip:** The `jaspr_lints` package provides a convenient lint rule to keep your styles properties organized. Learn more about it [here](/api/linting#lint-rules). ### Global Stylesheet You can define a global stylesheet from your Dart code using one of the following options: 1. Passing [Style Rules](/api/utils/at_css#defining-style-rules) to [Document(styles: ...)](/api/components/document#parameters). This will render the provided styles into a global stylesheet inside the `` element. 2. Using the [@css](/api/utils/at_css#registering-style-rules) annotation on a global variable to automatically render the annotated styles into a global stylesheet inside the `` element. 3. Using the [Style](/api/components/style) component to manually define a `