---
title: CSS personnalisé
slug: css-personnalise
description: Découvrez comment personnaliser et styliser les Espaces hébergés et publiés à l’aide de CSS grâce à ce document complet. Apprenez comment ajouter du CSS personnalisé à votre Espace, découvrez une liste de classes CSS pour styliser les éléments et informez
docTags: 
createdAt: 2021-01-28T13:38:24.000Z
---

Les Spaces hébergés et publiés peuvent être personnalisés à l’aide de CSS.

Vos modifications CSS ne seront incluses que sur votre domaine personnalisé. Lorsque vous prévisualisez votre Space publié, elles ne seront pas visibles, donc vous devez le publier en Production.

::::WorkflowBlock
:::WorkflowBlockItem
Choisissez un space et cliquez sur l’icône **Paramètres** ( ⚙️ ) pour ouvrir les** Paramètres de l’espace**
:::

:::WorkflowBlockItem
Recherchez l’onglet **Code personnalisé** dans la fenêtre Space Settings
:::

:::WorkflowBlockItem
Accédez au champ **CSS personnalisé** 
:::

:::WorkflowBlockItem
Tapez les balises **HTML \<style>**&#x20;
:::

:::WorkflowBlockItem
**Enregistrer** vos modifications dans le champ Custom CSS.
:::
::::

```css
<style>

 /* add the CSS clases and the properties you want to change */
 
</style>
```

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/2Y_i_udgWZFnHrvVD6fNb_custom-css-light.png "Custom CSS")

:::hint{type="warning"}
Pour des raisons de sécurité, le code personnalisé n’est inclus que sur un domaine personnalisé.
:::

Dans l’ensemble du DOM, vous trouverez des éléments HTML avec une classe CSS commençant par `ab-`. Vous pouvez cibler ces classes pour styliser le portail. **Ces classes sont garanties de ne jamais changer afin que nous ne brisions pas votre style lorsque nous mettons le système à jour.**