---
title: Custom CSS
slug: archbee-docs/custom-css
description: Learn how to customize and style hosted and published Spaces using CSS with this comprehensive document. Find out how to add custom CSS to your Space, discover a list of CSS classes to style elements, and learn about limitations in customization. Explore
docTags:
createdAt: 2021-01-28T13:38:24.000Z
---
Hosted and published Spaces can be customized using CSS.
Your CSS changes will only be included on your custom domain. When you preview your published Space, it will not be visible, so you need to publish it to Production.
::::WorkflowBlock
:::WorkflowBlockItem
Choose a space and click on the **Settings** icon ( ⚙️ ) to open the** Space Settings**
:::
:::WorkflowBlockItem
Look for the **Custom Code** tab on the Space Settings window
:::
:::WorkflowBlockItem
Go to the **Custom CSS** field
:::
:::WorkflowBlockItem
Type the **HTML \
```
:::hint{type="warning"}
For security reasons, custom code is only included on a custom domain.
:::
Across the DOM, you will find HTML elements with a CSS class that starts with `ab-`. You can target these classes to style the portal. **These classes are guaranteed never to change so that we don't break your styling when we update the system.**
If the element you are trying to style does not have a class starting with `ab-`, we don't allow customization, and it's mostly to protect you from yourself. For example, if we change the structure, it might impact your styling.
Every element and block in the content section also has a similar class. Below you can find a list of the classes. If you want to check them, please open DevTools in your browser by right-clicking -> Inspect.
This is a list of the current **available CSS classes:**
:::BlockQuote
.ab-callout \{ }
.ab-changeloc \{ }
.ab-code-editor \{ }
.ab-minitasker \{ }
.ab-graphiql \{ }
.ab-horizontal-divider \{ }
.ab-jira \{ }
.ab-map \{ }
.ab-mermaid \{ }
.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-left-nav-chevron \{ }
.ab-tree-navigation-link-inactive \{ }
.ab-space-navigation \{ }
.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 \{ }
.ab-search-modal-header \{ }
.ab-search-modal-content \{ }
.ab-auth-jwt-button \{ }
.ab-auth-saml-button \{ }
:::
**OpenAPI** **CSS classes**
:::BlockQuote
.ab-openapi \{ }
.ab-open-api-param-name \{ }
.ab-open-api-param-expand-icon \{ }
.ab-open-api-param-type \{ }
.ab-open-api-param-description-wrap \{ }
.ab-open-api-param-example-wrap \{ }
.ab-open-api-param-custom-type \{ }
.ab-open-api-required-star \{ }
.ab-open-api-param-example-title \{ }
.ab-open-api-param-example \{ }
.ab-open-api-param-description-title \{ }
.ab-open-api-param-description \{ }
.ab-open-api-input-wrap \{ }
.ab-open-api-array-input-wrap \{ }
.ab-open-api-schema-wrap \{ }
:::
The dark mode adds a dark class at the top of the HTML tree, and you can use that to target dark mode styles.
For example, this is how you change the text to red in dark mode:
```css
```