---
schema_version: "1"
id: a00bd7438e72769dd4fca8bc465552e9b4223864c0ca9ad9a33294e32c9a51a7
title: Create Style Sheet Items and Groups
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/platform/264-0-0/siteforce_style_css_create_rule.md
canonical_url: https://help.salesforce.com/s/articleView?id=platform.siteforce_style_css_create_rule.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 1c0e5a1d9b8ac352a1b4731543f413cbc5f0f25044ce0a661787253cc1951a6b
description: 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.
products:
  - Salesforce Platform
  - Security
release: "264"
---
# Create Style Sheet Items and Groups

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.

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

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

Creating Style Items

To open a style sheet, double-click it in the Style Sheets view of the Overview tab, or hover over it and click **![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**.

If you're very familiar with CSS and prefer coding by hand, click **Edit Style Sheet Code** to edit the style sheet directly using the CSS editor. Additionally, to add at-rules (for example, `@media`), you must edit the style sheet directly.

Alternatively:

1. Select the style sheet and click **![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)** | **Insert Style Item**.
2. Enter the name of the style item:
    - To redefine the default formatting of a specific HTML tag, enter the HTML tag name—for example, `body` or `h1`.
    - To create a CSS class, enter the class name and ensure that you include a period before it—for example, `.classname`.
    - To create a CSS ID, enter the ID name preceded by `#`—for example, `#contentID`.
3. Click **Apply**.
4. Add style definitions by either:
    - Setting [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.") in the visual style editor on the right
    - Typing CSS styles in the text box in the Style Preview section and clicking **Save**

As you modify the definition of a selected style item, you can see how your changes appear in the Style Preview section.

![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

- A class name must begin with a period or it isn’t recognized as a CSS class.
- An ID name must begin with `#` or it isn’t recognized as a CSS ID.
- Use IDs when there is only one occurrence per page. When you've used the ID, you can't use it again on that page. Use classes when there are one or more occurrences per page.
- Class and ID names can contain alphanumeric characters, hyphens, and underscores only, and can't begin with a number or include spaces.

Creating Style Groups

Use groups to organize your CSS logically, which makes it easier to locate and maintain styles.

When the style sheet is open:

1. Select the style sheet and click **![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)** | **Insert Style Group**.
2. Enter a name for the group and click **Apply**.
3. To add a style to the group, select the group and click **![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)** | **Insert Style Item**. To add an existing style to the group, drag it onto the folder icon.

Assigning Style Items

After you've created styles, you can assign them to the pages and pages elements of your site.

To assign a class to a page or page element, select it and either:

- Type the class name in the Class field of the Properties pane (![Properties](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_properties.png)).
- Select **Class** in 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)), start typing the name, and select it in the list that appears.

To assign an ID to a page or page element, either:

- Type the ID name in the ID field in the Properties pane (![Properties](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_properties.png)).
- Select **ID** in 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)) and select it in the dropdown list.

#### 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.")
- [Understand the Style Sheet View in Site.com](https://help.salesforce.com/s/articleView?id=platform.siteforce_style_sheet_edit.htm&release=264.0.0&type=5 "When working with style sheets, you can add style items, organize them into groups, and edit the CSS code directly.")
- [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.")