Three tiers. Use what you need.
Raw CSS on any element:
h1 "Hello" style="color: red; font-size: 3rem;"
Scoped CSS with shorthand properties, pseudo-classes, pseudo-elements, and breakpoints:
section { style { bg #1a1a2e padding 2rem radius 12px transition all 0.3s ease hover { transform translateY(-4px) shadow 0 8px 20px rgba(0, 0, 0, 0.3) } before { height 3px bg linear-gradient(90deg, #667eea, #f093fb) } @mobile { padding 1rem } @tablet { padding 1.5rem } } h1 "Styled!" }
Shorthand map
head "<style> .custom { backdrop-filter: blur(10px); } </style>"
Components with identical styles share one CSS class. Use a component 10 times, pay for CSS once.