# Style a widget with custom CSS

Write CSS rules that restyle any part of a widget, pick selectors for your widget's style from Snippets, and check them in the builder's preview.

On Business, **Custom CSS** on the widget builder's **Design** tab restyles any part of a widget, beyond what the other options on that tab cover. Your rules apply to the widget on your site and in the builder's preview.

1. **Open Custom CSS**

   In the widget 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 widget's style draws, in up to three groups:

   - **This Widget**: the widget's frame (**Widget Root**), **This Widget Type**, **This Style Only**, the style's **Layout**, the **Note Under Widget** while the widget shows one, and **Branding**.
   - **In This Style**: the parts of a testimonial, such as the card, the stars, the quote, the author's name and role, the date and the source, and in a style that plays videos, the **Video**, its **Video Thumbnail** and its **Play Button**.
   - **Controls & Panels**: where the style has them, such as arrows, dots, a **Load More Button** or a badge's review panel.

   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
   .widget-card {
     border-radius: 4px;
   }
   ```

   Your rules win over the widget's own styles wherever they match, so you don't need `!important`.

   To style one widget style only, start the rule with the selector from **This Style Only**, such as `.widget-root[data-widget-style="classic"] .widget-card`. If you switch the widget to another style later, that rule stops applying.

4. **Check it in the preview**

   The preview updates as you type. When you leave the box, a message under it names the line of anything left unfinished, such as a `{` with no `}`. Click **Preview** in the top bar to try the widget at **Desktop**, **Tablet** and **Mobile** sizes.

## What happens next

Your CSS saves with the widget, and a published widget shows it on your site like any other change. See [Publish, update or unpublish a widget](/help/display/publish-update-or-unpublish-a-widget).

If your plan changes to one without custom CSS, your site shows the widget without it. The CSS is kept, and **Clear** removes it.

## What custom CSS can't do

- **Load fonts.** `@import` and `@font-face` don't load reliably in a widget, and the builder's preview leaves them out. Choose the font under **Typography** instead.
- **Reach the widget from your site's stylesheet.** Your site's own CSS can't style the parts inside a widget: only **Custom CSS** can. See [Widget looks different on your website](/help/troubleshooting/widget-looks-different-on-your-site#what-your-site-can-and-cant-change).