---
title: "Fluid Styled Content"
manual: "StyleX Connector"
version: "1.1"
permalink: "https://docs.typo3.org/permalink/skom/stylex-connector:fluid-styled-content-integration@1.1"
source: "Integrations/FluidStyledContent.rst"
rendered: "2026-11-01T18:26:19+00:00"
---

# Fluid Styled Content {#fluid-styled-content-integration}

Choose how much of Fluid Styled Content's presentation the site will keep.
Both choices use the installation in [Installation](https://docs.typo3.org/permalink/skom/stylex-connector:installation@1.1) and the same Vite
bundle. The difference is which templates and CSS the site loads.

## Keep existing FSC styles {#keep-existing-fsc-styles}

For an existing site, keep `typo3/fluid-styled-content` and
`typo3/fluid-styled-content-css` in the active Site Set. Override only the
templates or partials whose markup should use StyleX. Set the sitepackage's
template fallback paths in its Site Set settings, for example:

```yaml
styles.templates.layoutRootPath: EXT:my_sitepackage/Resources/Private/ContentElements/Layouts
styles.templates.partialRootPath: EXT:my_sitepackage/Resources/Private/ContentElements/Partials
styles.templates.templateRootPath: EXT:my_sitepackage/Resources/Private/ContentElements/Templates
```

Copy the selected FSC template into the matching sitepackage directory, then
apply `stylex:class` keys to its elements. Existing elements continue to
use FSC's templates and CSS. Check the browser's computed styles where FSC
selectors and atomic classes set the same property.

## Own the presentation in the sitepackage {#own-the-presentation-in-the-sitepackage}

If the site supplies styles for its standard elements, omit
`typo3/fluid-styled-content-css` from the active Site Set while retaining
`typo3/fluid-styled-content` where its content rendering is used. Author
the site's templates and Content Blocks, and import their StyleX files from
the Vite entrypoint. See [Content Blocks](https://docs.typo3.org/permalink/skom/stylex-connector:content-blocks-integration@1.1) for glob discovery.

Rich-text output still contains elements such as paragraphs and links that
have no StyleX class on each element. Include a scoped base stylesheet in
the Vite entrypoint for that output:

```javascript
import '../CSS/rte.css';
```

```css
.ce-bodytext p { margin-block-end: 1rem; }
.ce-bodytext a { text-decoration: underline; }
```

With either choice, keep `useCSSLayers: false` while FSC or other CSS is
unlayered. The cascade guidance in [Bootstrap and cascade layers](https://docs.typo3.org/permalink/skom/stylex-connector:bootstrap-and-cascade-layers@1.1)
explains why a layer-order declaration alone does not layer existing CSS.