---
title: Style elements with CSS in the Visual Editor
slug: personalization/docs/mIF0-style-elements-with-css-in-the-visual-editor
docTags: 
createdAt: 2026-08-05T20:59:36.639Z
---

- Optimizely Web Experimentation
- Optimizely Personalization

You can use the [Visual Editor](docId:7tM_zXfrTc6bB19wLURDw) to change the appearance of certain elements on a page of your site. For example, maybe you want to make a headline stand out more by changing the font or adding a border. You can change the styling of an element with CSS by applying CSS tags for size, color, placement, and visibility.

## Style a page element with CSS

1. Go to your experiment or [create a new one](docId\:KiJTfQQjUsHKpV4igZ7Ea). Select a variation where you want to make a visual change.
2. Select a page from the drop-down list to edit it.
3. Click **Create **>** Element Change **to add a new change, or click an element on the page. 

   ![Create_Element_Change.png](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/s9t70o4q2nmtC5J5tvNMn-20260720-150058.png)
4. Select **Styles**.
5. Use **Inline CSS\* **\*to modify the selected element. Click to select an element in the Visual Editor. Any CSS code that already exists for that element automatically populates.

   ![Styles.png](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/rGhcJ9AJJCW9MKaRLW_8e-20260720-150058.png)
6. Select the element you want to change and type your [CSS](docId\:AcghmqDeOjhPNUYl7vbyn) into the text box.
7. Click **Save**.

[Preview your changes](docId\:G6SR7VF02w5hyw2yj0BLr), then publish them.

## CSS properties in Optimizely

You can use any CSS property to apply changes to elements in the Visual Editor. You cannot, however, target pseudo-elements, such as \:active, \:focus, \:hover, or whole classes, as inline CSS does not target these element types.