# Style a Wall of Love with custom CSS

Write CSS rules that restyle any part of your Wall of Love's embed and hosted page, with selectors from Snippets, and check them in the builder.

On Business, **Custom CSS** on the Wall of Love builder's **Design** tab restyles any part of a wall, beyond what the other options on that tab cover. Your rules apply to the wall's embed on your site and to its hosted page, and to both in the builder's preview.

1. **Open Custom CSS**

   In the Wall of Love builder, open the **Design** tab and click **Custom CSS** in the list.

2. **Pick a part from Snippets**

   Click **Snippets** and pick the part you want to style, or type to search. The list shows only what your wall draws, in up to three groups:

   - **Embed and Page**: the wall and its cards, such as the **Wall Card**, the stars, the quote, the author's name, the **Company Logo**, a **Tag**, an **Image**, the **Source Logo**, custom fields and a **Custom Card**.
   - **Embed Only**: the **Embed Heading**, the embed's **Branding**, and for a wall with the **Carousel** layout, the **Carousel Arrows**, **Carousel Dots** and **Active Dot**.
   - **Hosted Page Only**: the **Page Root** and the page's sections, such as the **Header**, **Hero**, **Filters** and **Footer CTA**. A section's parts are listed while the section is on.

   Each one adds an empty rule for its selector where your cursor is.

3. **Write your rules**

   Write your CSS between the braces, for example:

   ```css
   .wall-card {
     border-radius: 4px;
   }
   ```

   Your rules win over the wall's own styles wherever they match, on the embed and the hosted page alike, so you don't need `!important`.

4. **Check it in the preview**

   The preview updates as you type. Switch it between **Hosted page** and **Embed** to check each one. When you leave the box, a message under it names the line of anything left unfinished, such as a `{` with no `}`.

## What happens next

Your CSS saves with the wall. Once the wall is published, edits go live as you make them, on the embed and the hosted page. See [Create and publish a Wall of Love](/help/display/create-and-publish-a-wall-of-love).

If your plan changes to one without custom CSS, the embed and the hosted page show the wall without it. The CSS is kept, and **Clear** removes it.

## How the embed reads your CSS

The embed sits on your site in a space of its own, so your site's stylesheet can't reach the parts inside it, and your custom CSS reaches no further than the element that holds the embed.

- `:host` is the element that holds the embed on your page, such as `:host { max-width: 960px; }`.
- Rules that start at `body`, `html` or `:root` style the hosted page, and do nothing in the embed.

## What custom CSS can't do

- **Load fonts in the embed.** A font from `@import` or `@font-face` doesn't load in the embed, and the builder's preview leaves both out. Choose the font in an element's drawer instead, such as **Quote / Body**.
- **Style the video cards' player.** The video cards aren't in **Snippets**. Their look is set under **Video Cards**.