Skip to content

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

FeatureNotes
Selectors, :hover, ::before / ::afterScoped to the article
@media, @supports, @container, @layerRecursed into and scoped
@keyframes, @pageKept 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.

HonoWiki Engine guide