Method 1: Use Global CSS
Create src/styles/global.css.
article h2 { font-size: 1.5rem; margin-top: 2rem; }
article p { line-height: 1.8; margin-bottom: 1rem; }
article code { background: #f5f5f5; padding: 2px 6px; border-radius: 4px; }
article pre { background: #1e1e1e; color: #d4d4d4; padding: 1rem; border-radius: 8px; overflow-x: auto; }Import it in your layout file.
---
import '../styles/global.css';
---Layout File Configuration
---
title: 'Article Title'
layout: '../../layouts/PostLayout.astro'
---Gotchas
- HTML generated from Markdown does not automatically get CSS classes
- The layout file path is relative to the Markdown file
After setting up your styles, also configure SEO meta tags in Astro to complete your basic SEO setup.
Related Articles
- How to Add a New Page in Astro
- How to Set SEO Meta Tags in Astro
- How to Deploy Astro to Cloudflare Pages
- How to Read Cloudflare Pages Build Logs and Fix Errors
Recommended Services
- Fiverr - Find freelance developers and tech experts