CSS and Styles in Astro

Astro components were created to be capable of handling CSS right inside each component. Styling can be done through the use of the style tags, making it easy to keep styles associated with a component encapsulated in a single file. In this lesson, we’ll take a look at the following types of CSS:

• Scoped CSS: This is CSS that is scoped to a component, meaning styles are encapsulated and won’t affect other elements on the page. This approach can be effectively used to avoid conflicting CSS styles.

• Global CSS: This is CSS that is shared globally, which is the opposite of scoped CSS. When using global CSS, we can reuse the same styles across different components. This approach is useful for CSS resets or sharing commonly used styles. ...