---
title: "Asset.css ViewHelper <f:asset.css>"
manual: "Fluid ViewHelper Reference"
version: "13.4"
permalink: "https://docs.typo3.org/permalink/t3viewhelper:typo3-fluid-asset-css@13.4"
source: "Global/Asset/Css.rst"
modified: "2026-09-17T09:07:45+00:00"
---

# Asset.css ViewHelper `<f:asset.css>`

ViewHelper to add CSS to the TYPO3 AssetCollector. Either a file or inline CSS can be added.

Go to the source code of this ViewHelper: [Asset\\CssViewHelper.php (GitHub)](https://github.com/TYPO3/typo3/blob/main/typo3/sysext/fluid/Classes/ViewHelpers/Asset/CssViewHelper.php).

**Table of contents**

-   [Examples](https://docs.typo3.org/permalink/t3viewhelper:examples@13.4)
-   [Details](https://docs.typo3.org/permalink/t3viewhelper:details@13.4)
-   [Arguments of the <f:asset.css> ViewHelper](https://docs.typo3.org/permalink/t3viewhelper:arguments-of-the-f-asset-css-viewhelper@13.4)

## Examples

**packages/my_sitepackage/Resources/Private/Templates/Page/Default.fluid.html**

```html
<f:asset.css identifier="identifier123" href="EXT:my_ext/Resources/Public/Css/foo.css" />
<f:asset.css identifier="identifier123">
  .foo { color: black; }
</f:asset.css>
```

## Details

In the AssetCollector, the "identifier" attribute is used as a unique identifier. Thus, if assets are added multiple
times using the same identifier, the asset will only be served once (the last added overrides previous assets).

Some available attributes are defaults but do not make sense for this ViewHelper. Relevant attributes specific
for this ViewHelper are: as, crossorigin, disabled, href, hreflang, importance, integrity, media, referrerpolicy,
sizes, type, nonce.

Using the "inline" argument, the file content of the referenced file is added as inline style.

## Arguments of the `<f:asset.css>` ViewHelper

> **Allows arbitrary arguments**
>
> This ViewHelper allows you to pass arbitrary arguments not defined below
> directly to the HTML tag created. This includes custom `data-` arguments.

-   **additionalAttributes**

    -   *Type:* array

    Additional tag attributes. They will be added directly to the resulting HTML tag.

-   **aria**

    -   *Type:* array

    Additional aria-\* attributes. They will each be added with a "aria-" prefix.

-   **data**

    -   *Type:* array

    Additional data-\* attributes. They will each be added with a "data-" prefix.

-   **disabled**

    -   *Type:* bool

    Define whether or not the described stylesheet should be loaded and applied to the document.

-   **identifier**

    -   *Type:* string
    -   *Required:* true

    Use this identifier within templates to only inject your CSS once, even though it is added multiple times.

-   **inline**

    -   *Type:* bool
    -   *Default:* false

    Define whether or not the referenced file should be loaded as inline styles (Only to be used if 'href' is set).

-   **priority**

    -   *Type:* boolean
    -   *Default:* false

    Define whether the CSS should be included before other CSS. CSS will always be output in the \<head> tag.

-   **useNonce**

    -   *Type:* bool
    -   *Default:* false

    Whether to use the global nonce value
