Astro JS - Styling

Quiz

Styling in Astro

Astro framework has built-in support for CSS for applying styles to the components. You can use internal CSS, external CSS, and CSS preprocessors in Astro. In this chapter, we will discuss how to style Astro components using internal CSS, scoped styles, global styles, inline styles, and external styles.

Astro Styling Example

The following section shows a simple example of how to use internal CSS to style an Astro component.

/ src/pages/index.astro
---
---
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Home Page</title>
    <style>
    body {
        font-family: Arial, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #f0f0f0;
    }
    .container {
        text-align: center;
        background: white;
        border-radius: 8px;
    }
    </style>
</head>
<body>
    <div class="container">
    <h1>Welcome to Astro</h1>
    <p>This is a simple home page.</p>
    </div>
</body>
</html>

Output

In the output, you can see that the content of the Astro component is styled using internal CSS.

Astro Scoped Styles

The scoped styles refer to the styles that are applied to a specific component only. In Astro, you can use the scoped attribute to apply styles to a specific component. The CSS that you write inside of an Astro component is automatically encapsulated inside of that component.

Example

The following example shows how scoped styles work in Astro.

<!-- Style Written Inside Component -->
<style>
    h1 {
        color: red;
    }

    .text {
        color: blue;
    }
</style>

<!-- Style Compiled to the Component -->
<style>
    h1[data-astro-cid-hhnqfkh6] {
        color: red;
    }

    .text[data-astro-cid-hhnqfkh6] {
        color: blue;
    }
</style>

Astro Global Styles

Global styles are styles that are applied to the entire application. It is always recommended to use scoped styles, but in some case like applying a global font or color, you can use global styles. Let see an example.

Example

The following example shows how to use global styles in Astro.

---
---
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Home Page</title>
    <style is:global>
        /* Applies to all <h1> tags on your site. */
        h1 { color: red; }
    </style>
</head>
<body>
    <div>
        <h1>Welcome to Astro</h1>
        <p>This is a simple home page.</p>
    </div>
</body>
</html>

Output

In the output, you can see that the global styles are applied to the entire application.

Astro Inline Styles

Inline styles are styles that are applied directly to an element using the style attribute. Let's see an example.

Example

The following example shows how to use inline styles in Astro.

---
---
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Home Page</title>
</head>
<body>
    <div>
        <h1 style={{ fontSize: "2rem" }}>
            Astro Inline Style 
        </h1>
        <p style={{ color: "brown", textDecoration: "underline" }}>
            This is paragraph 1
        </p>
        <p style="color: brown; text-decoration: underline;">
            This is paragraph 2
        </p>
    </div>
</body>
</html>

Astro External Styles

Astro supports importing external CSS sheets to style the components. There are two ways to import external CSS in Astro:

Using ESM import syntax
Using the <link> tag

Using ESM Import

You can import stylesheets in your Astro component frontmatter using ESM import syntax. CSS imports work like any other ESM import in an Astro component, which should be referenced as relative to the component and must be written at the top of your component script, with any other imports. Astro will bundle and optimize this CSS for you automatically for you.

---
import '../styles/utils.css';
---
<html>
    <head>
        <title>Home Page</title>
    </head>
    <body>
        <div>
            <h1>Welcome to Astro</h1>
            <p>This is a simple home page.</p>
        </div>
    </body>
</html>

Using Link Tag

You can also use the <link> tag to import external CSS in Astro. This should be an absolute URL path to a CSS file located in your /public directory, or an URL to an external website. Relative <link> href values are not supported.

<head>
    <!-- Local: /public/styles/global.css -->
    <link rel="stylesheet" href="/styles/global.css" />
    <!-- External -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/nc.css" />
</head>

Print Page