---
title: "Styling components"
slug: "styling-components"
abstract: "Components and elements can be styled and customized in the Component builder using themes and rules from the styles library."
---
# Styling components

The Component builder lets you design components by [adding](https://doc.sitecore.com/sai/en/users/sitecoreai/design-components/components/prototyping-components/use-elements-to-build-components.html "Use elements to build components") and [configuring](https://doc.sitecore.com/sai/en/users/sitecoreai/design-components/components/prototyping-components/configuring-an-element.html "Configuring an element") elements within a component. You can configure elements by adjusting their layout, alignment, sizing, and placement, using the settings available in the right-hand panel.

You can also style your components and elements using the styles library. This library is built in the **Styles** builder, where a designer has created and saved element styles and themes. Some of these styles are specifically assigned to specific element categories and to themes. They are the *allowed* styles for an element or theme. The other styles, which are saved in the library but assigned to other elements or themes, are called *available* styles.

For styling and customizing styles, you have the following options:

- [Style a component](https://doc.sitecore.com/sai/en/users/sitecoreai/design-components/components/styling-components/style-a-component-with-a-theme.html#UUID-d70ed9ca-1316-3d5b-da01-20189b95b22b_section-idm4589729568736033556843821317 "Pick a theme for the component") - style *an entire component* in just a click with one of the themes.
- [Customize a theme](https://doc.sitecore.com/sai/en/users/sitecoreai/design-components/components/styling-components/style-a-component-with-a-theme.html#UUID-d70ed9ca-1316-3d5b-da01-20189b95b22b_section-idm4585461261646433556844348966 "Customize a theme") - customize the theme of a component by changing the style of *all elements of a specific type* (for example, all cards, or all image blocks) with another allowed style than the default style, or any other available style.
- [Style an element](https://doc.sitecore.com/sai/en/users/sitecoreai/design-components/components/styling-components/style-a-single-element-and-text.html "Style a single element and text") - style *one specific element* in the component with an allowed style for the element.
- [Customize an element](https://doc.sitecore.com/sai/en/users/sitecoreai/design-components/components/styling-components/customize-an-element.html "Customize an element") - customize *one specific element* by styling one or more of its features with another available style from the styles library that was not initially assigned to this element.
- [Make a one-off customization of an element](https://doc.sitecore.com/sai/en/users/sitecoreai/design-components/components/styling-components/customize-an-element.html "Customize an element") - customize *one specific element* even further by accessing in the Component builder all configuration settings usually only available in the Styles builder. This one-off customization in the Component builder only affects the element you are styling, and can not be reused elsewhere.