Now that you have a styled About page, let’s add some global styles for the rest of your site!
Get ready to…
- Apply styles globally
Add a global stylesheetSection titled Add a global stylesheet
You have seen that the Astro
<style> tag is scoped by default, meaning that it only affects the elements in its own file.
There are a few ways to define styles globally in Astro, but in this tutorial, you will create and import a
global.css file into each of your pages. This combination of stylesheet and
<style> tag gives you the ability to control some styles site-wide, and to apply some specific styles exactly where you want them.
Create a new file at the location
src/styles/global.css(You’ll have to create a
Copy the following code into your new file,
about.astro, add the following import statement to your frontmatter:
Check the browser preview of your About page, and you should now see new styles applied!
Try it yourself - Import your global stylesheetSection titled Try it yourself - Import your global stylesheet
Add the necessary line of code to each
.astro file in your project to apply your global styles to every page of your site.
✅ Show me the code! ✅
Add the following import statement to the two other page files:
Analyze the PatternSection titled Analyze the Pattern
Your About page is now styled using both the imported
global.css file and a
Are styles from both styling methods being applied?
Are there any conflicting styles, and if so, which are applied?
How would you choose whether to declare a style in a
global.cssfile or a