/Knowledge/sources/honojs__hono/llms-full/css-helper-css--1d1ee98a3a48.md
css Helper: css - hono-docs
css Helper: css Source evidence: /Sources/honojs hono/provenance.md Canonical citation: https://hono.dev/llms full.txt css Summary You can write CSS in the c...
css Helper: css
Source evidence: /Sources/honojs__hono/provenance.md Canonical citation: https://hono.dev/llms-full.txt#css
Summary
You can write CSS in the css template literal. In this case, it uses headerClass as a value of the class attribute. Don't forget to add as it contains the CSS content. ```ts{10,13} app.get('/', (c) => { const headerClass = css`...
Content
You can write CSS in the css template literal. In this case, it uses headerClass as a value of the class attribute. Don't forget to add <Style /> as it contains the CSS content.
app.get('/', (c) => {
const headerClass = css`
background-color: orange;
color: white;
padding: 1rem;
`
return c.html(
<html>
<head>
<Style />
</head>
<body>
<h1 class={headerClass}>Hello!</h1>
</body>
</html>
)
})
You can style pseudo-classes like :hover by using the nesting selector, &:
const buttonClass = css`
background-color: #fff;
&:hover {
background-color: red;
}
`
Metadata
{
"chunk_index": 0,
"citation": "https://hono.dev/llms-full.txt#css",
"coverage_role": "overview",
"qualified_title": "Hono / llms-full / css Helper > `css`",
"retrieved_at": "2026-07-02T05:51:01Z",
"section_index": 695,
"source_id": "/honojs/hono",
"source_type": "llms_full",
"target_label": "llms-full",
"title": "css Helper: css",
"upstream_url": "https://hono.dev/llms-full.txt",
"version": "2026"
}
Kinic Wiki