> For the complete documentation index, see [llms.txt](https://wplake.gitbook.io/advanced-views/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wplake.gitbook.io/advanced-views/post-selections/code-fields/css-code.md). # Selection CSS code In Advanced Views, every [*Post Selection*](/advanced-views/getting-started/first-post-selection.md) can have its own CSS. When present, the CSS is automatically injected into the page's `` section. This ensures styles are available before the content is rendered, improving the user experience and reducing the **First Contentful Paint (FCP)**. {% hint style="info" %} Before the CSS is added to the page, Advanced Views automatically performs basic minification, so there's no need for additional optimization tools or build steps. {% endhint %} #### On-Demand CSS loading Advanced Views uses an **on-demand** asset loading strategy. This means a *Post Selection*'s CSS is only loaded on pages where that *Layout* is actually used. Advanced Views handles this automatically behind the scenes. {% hint style="info" %} This approach completely eliminates the need for asset bundling, allowing you to create independent *Post Selections* that editors can mix and match in any combination, without having tons of site-wide CSS. {% endhint %} ## **1. Adding custom CSS to any *****Post Selection*** 1. Create a new [*Post Selection*](/advanced-views/getting-started/first-post-selection.md) or open an existing one 2. On the *Post Selection* edit screen, switch to the *CSS & JS* tab. 3. **Insert** or paste your CSS styles in the *CSS Code* field. 4. **Click** on the **Update** button to publish your changes. ## 2. Magic CSS aliases Scoping CSS to a specific component is a common task. Although every *Post Selection* has a unique ID-based class in the generated markup, adding it to every selector is repetitive and error-prone. Advanced Views solves this with CSS aliases. Use them anywhere in a *Post Selection*'s CSS, and they will be automatically replaced with the appropriate selector:
AliasReplaced with (by default)Replaced with (if BEM name is defined)
#selection.avf-selection--id--X.bem-name
#this__.avf-selection__.bem-name__
#selection__.avf-selection--id--X .avf-selection__.bem-name .bem-name__
#### In Practice Display fields and their labels on one line using: ```css /* universal */ /* Display fields and labels inline. */ #layout { > div { display: flex; gap: 10px; } } ``` {% hint style="info" %} Using a selector inside another selector is a [built-in CSS feature called nesting](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting). {% endhint %} ## 3. CSS libraries ### 3.1) Enqueuing a custom library To add complex interactive elements, like sliders, you'll need to use some libraries, which come with their own CSS files. If you use Advanced Views Pro, read about the [Pre-built libraries](/advanced-views/layouts/features/pre-built-libraries.md) to get a hassle-free experience. If you use Advanced Views Lite, or need to employ a specific library that is missing from the built-in list, you need to enqueue it on the target page. Classic enqueuing in WordPress happens with the [wp\_enqueue\_style](https://developer.wordpress.org/reference/functions/wp_enqueue_style/) function, but to avoid sitewide enqueueing (which is bad for performance), it requires manual detection of the target pages. That's why we recommend using the CSS [@import feature](https://developer.mozilla.org/en-US/docs/Web/CSS/@import) instead: ```css @import url('/wp-content/themes/mytheme/assets/slider/slider.css'); ``` Just add the import to the top of your *Layout* CSS code, and the browser will load this library on pages that require it. Don't worry if you have several components or multiple instances of the same component on a single page. According to the standard, the browser will download the library only once. {% hint style="info" %} We recommend bypassing the domain name and starting the path from the `/wp-content` folder. This ensures that the import works dynamically across Staging and Live environments. {% endhint %} ### 3.2) Sass usage In Advanced Views, there is a [File System Storage](/advanced-views/features/file-system-storage.md) option. If you enable it, you can utilize Sass for *Post Selections* CSS code - check [advanced FS storage usage](/advanced-views/features/file-system-storage/advanced-usage.md) for details. ### 3.2) Tailwind usage In Advanced Views, there is a [File System Storage](/advanced-views/features/file-system-storage.md) option. If you enable it, you can utilize Tailwind for *Post Selections* CSS code - check [advanced FS storage usage](/advanced-views/features/file-system-storage/advanced-usage.md) for details.