Salesforce Docs Portal

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

Available in: Salesforce Classic

Available for purchase in: Enterprise, Performance, and Unlimited Editions

Available (with limitations) in: Developer Edition

User Permissions Needed
To build, edit, and manage Site.com sites:

Site.com Publisher User field enabled on the user detail page

AND

Site administrator or designer role assigned at the site level

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 | 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 | 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 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
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 | 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 | 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).
  • Select Class in the Style pane (Style), 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).
  • Select ID in the Style pane (Style) and select it in the dropdown list.

See Also