> 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/layouts/code-fields/css-code.md).
# Layout CSS code
In Advanced Views, every [*Layout*](/advanced-views/getting-started/first-layout.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 *Layout*'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 *Layouts* that editors can mix and match in any combination, without having tons of site-wide CSS.
{% endhint %}
## **1. Adding custom CSS to any *****Layout***
1. [Create a new *Layout*](/advanced-views/getting-started/first-layout.md) or open an existing one
2. On the *Layout* 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.
#### **Finding classes in the Default Template**
Once your *Layout* has been published/updated, the Default template will be generated automatically and can be seen in the **Template** tab.
See the `class=""` attribute of the template for each field. E.g. `class="avf-layout__name-link"`.
Then define the style in the **CSS Code** field on the **CSS & JS** tab.
**Example:**
```
// add border to image
.avf-layout__category-image {
padding: 3px;
border: 1px solid #cecece;
}
```
## 2. Magic CSS aliases
Scoping CSS to a specific component is a common task. Although every *Layout* 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 *Layout*'s CSS, and they will be automatically replaced with the appropriate selector:
Alias
Replaced with (by default)
Replaced with (if BEM name is defined)
#layout
.avf-layout--id--X
.bem-name
#this__
.avf-layout__
.bem-name__
#layout__
.avf-layout--id--X .avf-layout__
.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 usage
### 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.
The 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 *Layouts* 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 *Layouts* CSS code - check [advanced FS storage usage](/advanced-views/features/file-system-storage/advanced-usage.md) for details.