Appearance
CSS in <style>
There are two ways to add CSS to a page.
Inline style="…"
Set the style attribute on an element. It applies to just that element:
<div style="color: #c9b27a; font-weight: bold">Highlighted</div>One restriction: the whole declaration is rejected if it contains url(...), expression(), javascript:, vbscript:, -moz-binding, or behavior:. So background images via inline style don't work — use a <style> block for that.
Scoped <style> blocks
More powerful, and automatically scoped to your article so nothing leaks out:
<style>
.card { border: 1px solid #ccc; border-radius: 8px; padding: 16px; }
.card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.1); }
@media (max-width: 640px) { .card { padding: 8px; } }
</style>Each selector is prefixed with .hw-parser-output, which is what contains it.
What works
| Feature | Notes |
|---|---|
Selectors, :hover, ::before / ::after | Scoped to the article |
@media, @supports, @container, @layer | Recursed into and scoped |
@keyframes, @page | Kept verbatim |
url(...) | Allowed here (e.g. background images) — unlike inline style= |
What's removed
- At-rules:
@import,@font-face,@charset,@namespace. - Scripting vectors:
expression(),javascript:,vbscript:,-moz-binding,behavior:.
See What's blocked for the exact patterns, Allowed attributes for where style= is permitted, and Scoped <style> for the tag itself.