import { Meta } from '@storybook/blocks';

<Meta title="Design/Css" />

# CSS

UUI-CSS package contains css files which can be included in your project or components if needed.

- **custom-properties.css** — use this if you like to include our custom properties in your project.
- **uui-font.css** — use the `.uui-font` class if you like to declare the Umbraco typography, this is needed for getting the Umbraco typography.
- **uui-text.css** — use the `.uui-text` class if you like to declare styles for typography, must be used together with `.uui-font`. This is needed for having proper styling for H1, H2, P, etc.
- **uui-css.css** — This stylesheet includes all of the above stylesheets.

## Usage

```html
<div class="uui-text">
  <h1>Hello uui-css!</h1>
  <p>
    This component will now use the styling from uui-text because the root of
    the component has the uui-text class.
  </p>
  <p style="background: var(--uui-color-surface-alt);">
    this paragraph uses a custom property from the uui custom properties to set
    its background color.
  </p>
</div>
```

<div className="uui-text">
  <h1>Hello uui-css!</h1>
  <p>
    This component will now use the styling from uui-text because the root of
    the component has the uui-text class.
  </p>
  <p style={{ background: 'var(--uui-color-surface-alt)' }}>
    this paragraph uses a custom property from the uui custom properties to set
    its background color.
  </p>
</div>
