---
schema_version: "1"
id: 180719ae5161be92dcc064eb462f47ec7ce4156df6b6c1ef4f5f380cafa9581f
title: Use the Style Pane
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/platform/264-0-0/siteforce_style_tab_using.md
canonical_url: https://help.salesforce.com/s/articleView?id=platform.siteforce_style_tab_using.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 93bd2b622b907c7e57d6cea9813af1170686a53978ebac342760336d239222e1
description: The Style pane is a visual CSS editor that lets you modify style properties, such as the background color, font size, and border style, as you work with pages and page elements. If you're using CSS classes or IDs to style your pages, you can modify or create style items directly from the Style pane, rather than opening the style sheet.
products:
  - Salesforce Platform
  - Security
release: "264"
---
# Use the Style Pane

The Style pane is a visual CSS editor that lets you modify style properties, such as the background color, font size, and border style, as you work with pages and page elements. If you're using CSS classes or IDs to style your pages, you can modify or create style items directly from the Style pane, rather than opening the style sheet.

### Required Editions

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small edition">
        <colgroup>
          <col>
        </colgroup>
        <tbody>
          <tr class="">
            <td class="slds-cell-wrap" style="vertical-align:top;">Available in: Salesforce Classic</td>

          </tr>
          <tr class="">
            <td class="slds-cell-wrap" style="vertical-align:top;">
              <p>Available for purchase in: <strong>Enterprise</strong>, <strong>Performance</strong>,
                and <strong>Unlimited</strong> Editions</p>
              <p style="margin-bottom:0;">Available (with limitations) in:
                <strong>Developer</strong> Edition
              </p>
            </td>

          </tr>
        </tbody>
      </table> <table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small permission">
        <colgroup>
          <col style="width:50%">
          <col style="width:50%">
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="colgroup" class="slds-cell-wrap" colspan="2" style="text-align:center;vertical-align:top;" id="d43155e76">User
              Permissions Needed</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="User Permissions Needed" class="slds-cell-wrap" style="vertical-align:top;" headers="d43155e76 ">To build, edit, and manage Site.com sites:</td>

            <td class="slds-cell-wrap" style="vertical-align:top;" headers="d43155e76 ">
              <p><samp class="parmname">Site.com Publisher User</samp> field enabled on the
                user detail page</p>
              <p>AND</p>
              <p style="margin-bottom:0;">Site administrator or designer role
                assigned at the site level</p>
            </td>

          </tr>
        </tbody>
      </table>

To apply a style to a selected page or page item:

1. Open the Style pane (![Style](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-platform-extend_click-264-0-0-production-enus/5f7d9219-b7b1-4552-8891-f1aba9b289fc/extend_click/images/siteforce_icon_css.png)).
2. To apply:
    
    - An inline style, select **Inline**. Inline styles affect the selected item only and aren't included in a style sheet.
    - A CSS class, select **Class** and start typing the name. If the class exists in your style sheet, select it in the list that appears. To create a class, type the name, select it, and click **Yes** to add it to the style sheet.
    - A CSS ID, select **ID** and select it in the dropdown list. To create an ID, click ![Add](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-platform-extend_click-264-0-0-production-enus/5f7d9219-b7b1-4552-8891-f1aba9b289fc/extend_click/images/siteforce_icon_add.png), enter the ID name, and click ![Tick icon](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-platform-extend_click-264-0-0-production-enus/5f7d9219-b7b1-4552-8891-f1aba9b289fc/extend_click/images/siteforce_icon_tick.png).
    
    Menu page elements have several components, which you can [style individually](https://help.salesforce.com/s/articleView?id=platform.siteforce_menu_style.htm&release=264.0.0&type=5 "Navigation menus are styled using CSS themes that you can customize to match the design of your website. When you add a navigation menu to a page, it uses a default theme to control its appearance. Choose from other existing themes in the Theme Name dropdown list in the Properties pane.") by selecting your preferences in the Style dropdown list that appears.
3. In the Visual tab, apply [style properties](https://help.salesforce.com/s/articleView?id=platform.siteforce_style_tab_properties.htm&release=264.0.0&type=5 "The Style pane is a visual CSS editor that lets you modify style properties, such as the background color, font size, and border style, as you work with pages and page elements.") as appropriate. Alternatively, in the Code tab, you can type your CSS styles directly and click **Apply**.

![Tip](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-platform-extend_click-264-0-0-production-enus/5f7d9219-b7b1-4552-8891-f1aba9b289fc/images/icon_tip.png)

Tip To view the style properties associated with a selected page or page element, open the Code tab of the Style pane. To remove the style properties, click **Clear**.

#### See Also

- [Create Style Sheet Items and Groups](https://help.salesforce.com/s/articleView?id=platform.siteforce_style_css_create_rule.htm&release=264.0.0&type=5 "When adding style items to style sheets, you can define CSS classes and IDs, or you can redefine the formatting of HTML tags such as body or h1. When you change the CSS style of an HTML tag, anything formatted with that tag is immediately updated.")
- [Create and Use CSS Style Sheets](https://help.salesforce.com/s/articleView?id=platform.siteforce_style_css_create_sheet.htm&release=264.0.0&type=5 "A default style sheet called “Site Style Sheet” is included with every site you create. However, if you're familiar with CSS and need multiple style sheets, you can create ones to use in your site.")
- [Cascading Style Sheets Overview](https://help.salesforce.com/s/articleView?id=platform.siteforce_style_overview.htm&release=264.0.0&type=5 "Cascading Style Sheets (CSS) provide a flexible way to add style to the pages of your website. This collection of formatting rules governs the appearance of your pages, and lets you define the fonts, colors, layout, and other presentation features.")