---
title: Class & Style Attributes
description: Learn how to dynamically style your HTML and body tags with Unhead's powerful class and style attribute API
navigation:
title: Class & Style Attributes
---
## Introduction
When you need to style your page by adding classes or styles to the `<html>`{lang="html"} or `<body>`{lang="html"} tags, Unhead makes it easy by
providing object and array support for the `class` and `style` attributes. This allows for both static and reactive styling.
## Static Classes & Styles
If your classes or styles aren't going to change, you can provide them as a string.
::code-group
```ts [HTML Attrs]
import { useHead } from '@unhead/dynamic-import'
useHead({
htmlAttrs: {
class: 'my-class my-other-class',
style: 'background-color: red; color: white;'
}
})
```
```ts [Body Attrs]
import { useHead } from '@unhead/dynamic-import'
useHead({
bodyAttrs: {
class: 'my-class my-other-class',
style: 'background-color: red; color: white;'
}
})
```
::
::tip
If you're server-side rendering static tags, you can make use of [Bundle Optimizations](/docs/head/guides/core-concepts/class-attr).
::
### Array Classes & Styles
Using manual separators for classes and styles can be a bit cumbersome, so Unhead allows you to use arrays for both.
```ts
import { useHead } from '@unhead/dynamic-import'
useHead({
htmlAttrs: {
class: [
'my-class',
'my-other-class'
],
style: [
'background-color: red',
'color: white'
],
}
})
```
## Dynamic Classes & Styles
For improved reactivity and merging support, you can provide the class as an object or an array.
### Object Syntax for Classes
When providing class as an object, the key should be the class name and the value determines whether the class should be added or not.
```ts
import { useHead } from '@unhead/dynamic-import'
const colorMode = useColorMode()
useHead({
htmlAttrs: {
class: {
// will be rendered when darkMode is true
dark: () => colorMode.value === 'dark',
// will be rendered when darkMode is false
light: () => !colorMode.value === 'dark'
}
}
})
```
### Object Syntax for Styles
Similarly, styles can be defined reactively using an object:
```ts
import { useHead } from '@unhead/dynamic-import'
const colorMode = useColorMode()
useHead({
bodyAttrs: {
style: {
// conditional style that only applies when darkMode is true
'background-color': () => colorMode.value === 'dark' ? 'rgba(0, 0, 0, 0.9)' : false,
// reactive style that always applies with current value
'font-size': () => fontSize.value,
}
}
})
```