---
title: Comment styliser les modèles Archbee avec du CSS
slug: docs/fr/comment-styliser-les-modeles-archbee-avec-du-css
description: Découvrez comment styliser vos modèles en utilisant l’option CSS personnalisé dans la fonctionnalité Code personnalisé. Apprenez comment les utilisateurs peuvent appliquer du CSS aux éléments HTML dont les noms de classe commencent par « ab- ». Obtenez de
createdAt: 2022-05-17T14:41:45.000Z
---

[CSS personnalisé](docId\:GOvSUBYYcqRe5jBWz6FVv) est une option de la fonctionnalité [Code personnalisé](docId\:ZSYAkFa_fBF0EstX5I1gd) qui permet aux utilisateurs de styliser leur modèle.

Vous pouvez styliser n’importe lequel des éléments HTML suivants qui possèdent une classe commençant par `ab-` :

:::BlockQuote
.ab-callout \{ }
.ab-changeloc \{ }
.ab-code-editor \{ }
.ab-minitasker \{ }
.ab-graphiql \{ }
.ab-horizontal-divider \{ }
.ab-jira \{ }
.ab-map \{ }
.ab-mermaid \{ }
.ab-openapi \{ }
.ab-vertical-split \{ }
.ab-vertical-split-item \{ }
.ab-video \{ }
.ab-checklist \{ }
.ab-blockquote \{ }
.ab-diagram \{ }
.ab-embed \{ }
.ab-file \{ }
.ab-iframe \{ }
.ab-html \{ }
.ab-image \{ }
.ab-ul-list \{ }
.ab-ol-list \{ }
.ab-list-item \{ }
.ab-list-item-child \{ }
.ab-table \{ }
.ab-space \{ }
.ab-collection \{ }
.ab-space-container \{ }
.ab-collection-container \{ }
.ab-top-navbar \{ }
.ab-search-input \{ }
.ab-public-search \{ }
.ab-space-content \{ }
.ab-collection-content \{ }
.ab-tree-navigation \{ }
.ab-tree-navigation-link \{ }
.ab-tree-navigation-link-inactive \{ }
.ab-doc-name \{ }
.ab-h1 \{ }
.ab-h2 \{ }
.ab-h3 \{ }
.ab-expandable-heading \{ }
.ab-link \{ }
.ab-link-dynamic \{ }
.ab-nav-right \{ }
.ab-nav-right-text \{ }
.ab-bold \{ }
.ab-code \{ }
.ab-paragraph \{ }
.ab-footer-container \{ }
:::

Lors de l’ajout du **CSS**, veuillez utiliser les balises `<style>` dans le champ **CSS personnalisé** comme dans l’exemple ci-dessous :

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/IejgS2OzOMqCiBgEt4CrP_custom-css-light.png "Section CSS personnalisé")