Scoped <style>

Add CSS for a single page with <style>…</style>. Every selector is automatically scoped to that article's content, so your styles can never leak into the site navigation, sidebar, or other articles.

<style>
.bd-banner { display: flex; gap: 24px; padding: 12px 20px; }
.bd-banner .title { font-size: 1.5em; font-weight: bold; color: #fff; }
@media (max-width: 640px) { .bd-banner { flex-direction: column; } }
</style>

Behind the scenes each selector is prefixed — .bd-banner becomes .hw-parser-output .bd-banner — which is what keeps it contained.

What you can use

• Ordinary selectors, :hover, ::before / ::after.
• @media, @supports, @container, @layer — recursed into and scoped.
• @keyframes and @page — kept as written.
• url(...) — allowed inside <style> blocks (e.g. background images), unlike inline style= where it's forbidden.

What's stripped

• @import, @font-face, @charset, @namespace.
• Scripting vectors: expression(), javascript:, vbscript:, -moz-binding, behavior:.

Apply your classes with the class= option on images or on inline HTML. See CSS in style blocks for the full rules, and the allowed-attributes list for style=.