/Knowledge/sources/honojs__hono/llms-full/css-helper-css-global-styles--50547a166422.md
css Helper: css > Global styles - hono-docs
css Helper: css Global styles Source evidence: /Sources/honojs hono/provenance.md Canonical citation: https://hono.dev/llms full.txt global styles Summary A...
css Helper: css > Global styles
Source evidence: /Sources/honojs__hono/provenance.md Canonical citation: https://hono.dev/llms-full.txt#global-styles
Summary
A pseudo-selector called :-hono-global allows you to define global styles. tsx const globalClass = css` :-hono-global { html { font-family: Arial, Helvetica, sans-serif; } } ` return c.render( Hello! Today is a good day. ) Or yo...
Content
A pseudo-selector called :-hono-global allows you to define global styles.
const globalClass = css`
:-hono-global {
html {
font-family: Arial, Helvetica, sans-serif;
}
}
`
return c.render(
<div class={globalClass}>
<h1>Hello!</h1>
<p>Today is a good day.</p>
</div>
)
Or you can write CSS in the <Style /> component with the css literal.
export const renderer = jsxRenderer(({ children, title }) => {
return (
<html>
<head>
<Style>{css`
html {
font-family: Arial, Helvetica, sans-serif;
}
`}</Style>
<title>{title}</title>
</head>
<body>
<div>{children}</div>
</body>
</html>
)
})
Metadata
{
"chunk_index": 0,
"citation": "https://hono.dev/llms-full.txt#global-styles",
"coverage_role": "overview",
"qualified_title": "Hono / llms-full / css Helper > `css` > Global styles",
"retrieved_at": "2026-07-02T05:51:01Z",
"section_index": 697,
"source_id": "/honojs/hono",
"source_type": "llms_full",
"target_label": "llms-full",
"title": "css Helper: css > Global styles",
"upstream_url": "https://hono.dev/llms-full.txt",
"version": "2026"
}
Kinic Wiki