--- title: "@css / css()" description: Styling utility to write nested style rules. --- --- To style your website in Jaspr you need to write css styles alongside your html markup. See the [Styling](/concepts/styling) docs for a general overview of the different ways to add styling to your website. The `css` utility gives you a convenient way of writing CSS style rules in Dart alongside your Jaspr components. It uses a combination of nested css selectors and Jasprs fully typed [CSS bindings](/api/utils/styles) in Dart. --- ## Registering style rules When used as the `@css` annotation, you can register any amount of style definitions to be automatically rendered as CSS in your page. ```dart @css List get styles => [ // Style rules in here (covered in next section) /* ... */ ]; ``` The `@css` annotation can be applied to the following elements: - global variables or static fields of type `List` - global or static getters returning `List` 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, ), ]), ]; } ``` Styles defined in a component and registered using `@css` are **not** scoped to that component. You should try to use ids or unique class names as selectors to prevent unwanted effects on other components or conflicting style definitions. **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). --- How the styles are rendered depends on your [Rendering Mode](/dev/modes): By default, your styles are rendered during the normal pre-rendering phase and embedded as an inline `