--- schema_version: "1" id: 7c64688185cd605eef4263dd7eae6234f14d14694002d6eb478d103e5e9fbb14 title: Cascading Style Sheets Overview collection: admin version: current locale: en-us portal_url: https://docs.salesforce.com/admin/current/en-us/platform/264-0-0/siteforce_style_overview.md canonical_url: https://help.salesforce.com/s/articleView?id=platform.siteforce_style_overview.htm&release=264.0.0&type=5 source_site: help.salesforce.com content_type: documentation content_hash: 2bed65c2a1309b98faee33ba5a28851ff29940bed55956e73332cd300c0df82f description: 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. products: - Salesforce Platform - Security release: "264" --- # Cascading Style Sheets Overview 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. ### Required Editions
Available in: Salesforce Classic

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

Available (with limitations) in: Developer Edition

By using CSS to control your fonts, you can ensure greater consistency in the appearance and layout of your pages in multiple browsers. Some of the many text properties that CSS lets you control include font family and size, text and background color, text formatting, and link color. Using CSS, you can also position, add color to, float text around, and set margins and borders for block-level elements. A block-level element is a standalone piece of content that's visually formatted as a block. For example, content blocks (which are equivalent to `p` tags) and panels (which are the same as `div` tags) are both block-level elements. Site.com supports CSS3, which is the latest specification for CSS. ## About Inline Styles Versus Style Sheets In Site.com Studio, you can: - Apply styles directly to a selected page or page element using the **Inline** option 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)). Inline styles apply only to the selected item. - Add style items such as CSS classes or IDs to a style sheet, and apply the style items to the selected page or page element. This approach separates the content (your web pages) from the presentation (the style sheet). If you're not familiar with CSS, the inline option is probably the easiest to use and understand. However, inline styles lose many of the advantages of style sheets because they mix content with presentation—the inline style is only applied to that individual element. If you need to update the style of your site, you have to update the style properties of every affected page and page element. By contrast, although style sheets can be more difficult to understand at first, they enable you to make site-wide changes from one convenient location. When you update a style item in your style sheet, it immediately updates the style of every page or page element that uses it. It's worth taking the time to become familiar with CSS because it: - Saves you time and effort when building and designing your site - Produces cleaner, more consistent site designs - Simplifies navigation for people with accessibility issues (such as site visitors using screen readers) For more information about using CSS and creating style sheets, go to the World Wide Web Consortium (W3C) at [www.w3.org/Style/CSS](http://www.w3.org/Style/CSS). There are also many tutorials available on the Internet that provide in-depth CSS training. ## About CSS Classes and IDs When you use style sheets to style your site, you can redefine the formatting of HTML tags such as `body` or `h1`. You can also create CSS classes and IDs to define the style of particular elements, such as headers or repeating content. A CSS class lets you define and apply style properties to many elements on a page, whereas a CSS ID is ideal for targeting a single item on a page. For example, in a page's structure, IDs are often used to define the header and footer areas, as each page has only one header or footer, but classes are used to define repeating page elements, such as a blog post. ## Best Practices - Include 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.") in your style sheet to reset all style items to a baseline value. A CSS reset helps avoid cross-browser differences due to their built-in default style settings. - Use CSS classes and IDs instead of inline styles wherever possible. CSS classes and IDs promote the separation of presentation and content, and makes it easier to update the site's styles. - 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. - Use [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 organize your CSS logically and make it easier to maintain your style sheet. - If you're using CSS3, ensure you preview and test your site in each browser that you want it to support, because some browsers haven't yet fully implemented CSS3 features. - **[Use the Style Pane](https://help.salesforce.com/s/articleView?id=platform.siteforce_style_tab_using.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. 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. - **[Style Pane 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. - **[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. - **[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. - **[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. - **[Use 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. #### See Also - [Use the Style Pane](https://help.salesforce.com/s/articleView?id=platform.siteforce_style_tab_using.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. 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.") - [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.") - [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.")