--- layout: ~/layouts/MainLayout.astro title: Styling & CSS description: Learn how to style components with Astro. --- Astro includes special handling to make writing CSS as easy as possible. Styling inside of Astro components is done by adding a `

I’m a scoped style and I’m red!

I'm a scoped style and I’m cursive!

``` Note that the `h1` selector won’t bleed out of the current component! These styles won’t apply any other `h1` tags outside this document. Not even child components. _Tip: even though you can use element selectors, using classnames is preferred. This is not only slightly more performant, but is also easier to read, especially in a large document._ ### Global styles Of course, the real power of CSS is being able to reuse as much as possible! The preferred method of loading global styles is by using a standard `` tag like you’re used to. It can even be used in conjunction with Astro’s scoped `

Scoped Page Title

``` _Note: `Astro.resolve()` is a handy utility that helps resolve files from anywhere ([docs][astro-resolve])_ #### Styling children If you’d like scoped styles to apply to children, you can use the special `:global()` function borrowed from [CSS Modules][css-modules]: ```astro --- import PostContent from './Post.astro'; ---

Title

``` This is a great way to style things like blog posts, or documents with CMS-powered content where the contents live outside of Astro. But be careful when styling children unconditionally, as it breaks component encapsulation. Components that appear different based on whether or not they have a certain parent component can become unwieldy quickly. #### Global styles within style tag If you’d like to use global styles but you don’t want to use a normal `` tag (recommended), there is a `

Globally-styled

``` You can achieve the same by using the `:global()` function at the root of a selector: ```html ``` It’s recommended to only use this in scenarios where a `` tag won’t work. It’s harder to track down errant global styles when they’re scattered around and not in a central CSS file. 📚 Read our full guide on [Astro component syntax][astro-component] to learn more about using the ` ``` _Note: all the examples here use `lang="scss"` which is a great convenience for nesting, and sharing [colors and variables][sass-use], but it's entirely optional and you may use normal CSS if you wish._ That `.btn` class is scoped within that component, and won't leak out. It means that you can **focus on styling and not naming.** Local-first approach fits in very well with Astro's ESM-powered design, favoring encapsulation and reusability over global scope. While this is a simple example, it should be noted that **this scales incredibly well.** And if you need to share common values between components, [Sass' module system][sass-use] also gets our recommendation for being easy to use, and a great fit with component-first design. By contrast, Astro does allow global styles via the `:global()` and ` ``` This is undesirable because now `