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

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

Vous pouvez styliser n’importe lequel des éléments HTML suivants qui ont 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 Customm CSS")