---
schema_version: "1"
id: 4c68a05f47e311cba51edfe01540d6e84f4451d4df47aeb08e3dc2d772a0dccd
title: Create and Use CSS Style Sheets
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_sheet.md
canonical_url: https://help.salesforce.com/s/articleView?id=platform.siteforce_style_css_create_sheet.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 50865c3a5ad53f73c166d73666d14b0e1772486256b0bb3c49de4dc5b23c8f89
description: 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.
products:
  - Salesforce Platform
  - Security
release: "264"
---
# Create and Use CSS Style Sheets

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.

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

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

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

- Style sheet names can only contain alphanumeric characters, hyphens, colons, and underscores.
- You can also [import a CSS file](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.") to use in your site.

1. Click **Style Sheets** | **New** on the Overview tab. Alternatively, click **New Style Sheet** in the Style Sheets view.
2. Enter a name for the style sheet.
3. Click **Apply**. The style sheet opens.
4. [Add 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.") to the style sheet.

After you create a style sheet, you must attach it to a page to apply its styles to the page.

To attach a style sheet to a page:

![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 If you used a [page template](https://help.salesforce.com/s/articleView?id=platform.siteforce_page_master.htm&release=264.0.0&type=5 "Before you begin building the pages of your website, take some time to plan the pages you need, and in particular, which pages have a similar layout. When you've decided on the layout, the quickest method is to use a page template to build the basic layout.") to create your site pages, the quickest way to include the new style sheet on every page is to attach it to the template, which automatically includes a reference to the style sheet in every page that's based on the template.

1. Select the page in the Page Structure pane (![Page Structure](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_domtree.png)).
2. In the Style Sheets section 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)), 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).
3. Select the style sheet in the list that appears.
4. Attach the style sheet to the page by clicking ![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) beside the dropdown list.

#### See Also

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