---
schema_version: "1"
id: 21e654d65899594c73ad2389b0c57213f51764b937923f77e699b46b095117b1
title: Understand the Style Sheet View in Site.com
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/platform/264-0-0/siteforce_style_sheet_edit.md
canonical_url: https://help.salesforce.com/s/articleView?id=platform.siteforce_style_sheet_edit.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 45661465b7fb2efa0b634b5dd2f30e5d4711376b1dc61ff0affbadcdee7bd7e6
description: When working with style sheets, you can add style items, organize them into groups, and edit the CSS code directly.
products:
  - Salesforce Platform
  - Security
release: "264"
---
# Understand the Style Sheet View in Site.com

When working with style sheets, you can add style items, organize them into groups, and edit the CSS code directly.

### 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="d110531e74">User
              Permissions Needed</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="User Permissions Needed" class="slds-cell-wrap" style="vertical-align:top;" headers="d110531e74 ">To build, edit, and manage Site.com sites:</td>

            <td class="slds-cell-wrap" style="vertical-align:top;" headers="d110531e74 ">
              <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>

Open a style sheet on the Overview tab by double-clicking it or hovering over it and clicking **![Actions](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_actions.png)** | **Edit**. The style sheet opens as a new tab.

![The style sheet view, numbered 1-4](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_ui_stylesheet.png)

- Using the toolbar (1), you can [import a style sheet](https://help.salesforce.com/s/articleView?id=platform.siteforce_assets_import.htm&release=264.0.0&type=5 "Contributors, publishers, and site administrators can import a variety of assets, such as images, HTML pages, and PDFs, to use in a website. You can import assets and files individually, or use a zipped file. When importing entire websites or large numbers of assets, it’s easier to create a zipped file of the content with the desired folder structure. When importing the zipped file for a website, Site.com recreates your website and places everything in the same folder structure.") and edit the style sheet's CSS code directly.
- Using the style sheet pane (2), you can:
    - [Create style 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.")
    - Preview, edit, and delete style items
    - Move style items and groups by dragging them to the correct location
    - [Add a CSS reset](https://help.salesforce.com/s/articleView?id=platform.siteforce_style_css_reset.htm&release=264.0.0&type=5 "Every browser has set presentation defaults, but unfortunately they aren't standardized across all browser types. This means that when you use CSS to style your site, it doesn’t render as expected when you view it in different browsers.")
- Using the Style Preview section (3), you can preview and manually edit a selected style item.
    
    ![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-platform-extend_click-264-0-0-production-enus/5f7d9219-b7b1-4552-8891-f1aba9b289fc/images/icon_note.png)
    
    Note You can't preview at-rules, such as `@media` or `@font-face`, in the Style Preview section.
- Using the visual CSS editor (4), you can define the [CSS 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.") for the selected style item.

#### See Also

- [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.")