# Styled JSX

Styled JSX is a CSS-in-JS library that allows you to write encapsulated and scoped CSS to style your components. The styles you introduce for one component won't affect other components, allowing you to add, change and delete styles without worrying about unintended side effects.

<ResourceGroupTitle>Free Content</ResourceGroupTitle>

<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://github.com/vercel/styled-jsx'>Getting started</BadgeLink>
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=SM5uVbfgfdo'>Styled JSX in Next.js: Master Next.js</BadgeLink>
