Style Your Astro Website: A Simple Guide

Style Your Astro Website: A Simple Guide

In this guide, you will learn how to add styles to your Astro website. We will cover adding styles directly within components using the `style` tag, and how to make these styles global or keep them scoped to a specific component. You’ll also learn how to apply styles to elements across your entire site and how to add specific styles to individual pages.

Prerequisites

• Basic understanding of HTML and CSS.
• An existing Astro project set up.

1. Adding Styles Directly to Components

Astro makes it easy to add styles right inside your component files. You can place a <style> tag anywhere within your component, usually at the bottom, just below the template code.

Example: Styling an H2 on the Homepage

1. Open your homepage component file (e.g., index.astro).
2. Add a <style> tag at the bottom of the file.
3. Inside the <style> tag, write your CSS rules. For example, to make all H2 headings red, you would add h2 { color: red; }.
4. Save the file. You should see the H2 heading on your homepage turn red.

Important Note: By default, styles added this way are scoped to the component they are in. This means they will only affect elements within that specific component file and won’t spill over to other pages or components.

2. Using Styles in the Layout Component

To apply styles to multiple pages, you can place them in your layout component. This is useful for elements that appear on every page, like headers or footers.

Example: Styling H1 and H2 in the Layout

1. Open your layout component file (e.g., layout.astro).
2. Add a <style> tag at the bottom.
3. Add CSS rules targeting H1 and H2. For instance, h1, h2 { color: red; }.
4. Save the file.

Observation: You will notice that the H1 in the layout file turns red, but the H2 tags on your other pages do not. This is because Astro scopes the styles to the component. The H2 tags are not inside the layout component itself, so the styles don’t apply to them.

How Astro Scopes Styles

Astro automatically adds special data attributes to your HTML elements and targets these attributes in your CSS. This ensures that styles only apply to the intended elements within their specific component. You can see these attributes if you inspect the H1 element in your browser’s developer tools.

3. Making Styles Global

Sometimes, you need styles to apply everywhere on your site. Astro provides a way to make component styles global.

Making Styles Global

1. In your <style> tag, add the attribute is:global.
2. For example: <style is:global> h2 { color: red; } </style>.
3. Save the file.

Result: Now, the styles will apply to all H2 elements across your entire website, not just within the component where the style tag is placed. When you inspect these elements, you won’t see the data attributes that Astro normally adds for scoping.

4. Mixing Global and Scoped Styles

You can have both global and component-scoped styles within the same <style> tag in your layout or component files. This offers great flexibility.

Example: Layout Styles

1. Open your layout component file.
2. Add a <style> tag.
3. Add some styles that should only apply to the layout’s header and navbar (these will be scoped by default).
4. Below those, add another section with is:global for styles that should apply everywhere, like font families or general content styling.
5. For example, you might set a global font family like ‘Poppins’ and style a common ‘content’ class.

Tip: It’s a good practice to use global styles in your layout for common elements like fonts, basic layout structures, and navigation. Then, use scoped styles in individual page components for unique styling specific to that page.

5. Applying Styles to Pages and Content

To use styles that target specific parts of your page content, you often need to add corresponding HTML structure, like wrapper divs with specific classes.

Example: Adding a ‘content’ Class

1. Open your homepage component (e.g., index.astro).
2. Wrap your main page content (like headings, paragraphs, links) inside a <div class="content"></div>.
3. Add specific styles for this .content class within the component’s <style> tag, or use global styles in the layout if this structure is consistent across pages.
4. Repeat this process for other pages like ‘about.astro’ and ‘books.astro’, wrapping their main content in a <div class="content"></div>.
5. You can also add component-specific styles within the page’s <style> tag. For instance, styling an anchor tag with a hover effect only on the homepage.

Example for Homepage Specific Styles:

<style>
  .content {
    /* Styles specific to homepage content */
    text-align: center;
  }
  a {
    /* Styles for links on this page */
    background-color: yellow;
    padding: 5px;
  }
  a:hover {
    background-color: orange;
  }
</style>

6. Importing Fonts

If you are using custom fonts like ‘Poppins’ (as mentioned in the global styles), you need to link them to your project. This is typically done in the <head> section of your layout component.

Importing Google Fonts

1. Go to Google Fonts and select the font you want (e.g., Poppins).
2. Select the styles and weights you need.
3. Copy the provided link tag. It will look something like: <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
4. Paste this link tag into the <head> section of your layout.astro file, usually within the <head></head> tags.
5. Save the layout file.

With these steps, you can effectively manage and apply styles across your Astro application, choosing between component-specific scoping and global reach as needed.

Source: Astro Crash Course #4 – Styles (YouTube)