Visualforce Developer Guide

Introducing Visualforce
Tools for Visualforce Development
Getting a Quick Start with Visualforce
Customizing the Appearance and Output of Visualforce Pages
Styling Visualforce Pages
Using Salesforce Styles
Extending Salesforce Styles with Stylesheets
Using the Lightning Design System
Style Existing Visualforce Pages with Lightning Experience Stylesheets
Using Custom Styles
Suppressing the Salesforce User Interface and Styles
Defining Styles for a Component’s DOM ID
Using Styles from Salesforce Stylesheets
Identifying the Salesforce Style Your Users See
Determining the Salesforce Style That Users See in JavaScript
HTML Comments and IE Conditional Comments
HTML Tags Added or Modified by Visualforce
Using a Custom Doctype
Using a Custom ContentType
Setting Custom HTML Attributes on Visualforce Components
Offline Caching Using the HTML5 manifest Attribute
Render a Visualforce Page as a PDF File
Standard Controllers
Standard List Controllers
Custom Controllers and Controller Extensions
Live Controller (Pilot)
Advanced Examples
Overriding Buttons, Links, and Tabs with Visualforce
Using Static Resources
Creating and Using Custom Components
Dynamic Visualforce Bindings
Dynamic Visualforce Components
Integrating Email with Visualforce
Visualforce Charting
Creating Maps with Visualforce
Render Flows with Visualforce
Templating with Visualforce
Developing Salesforce Apps with Visualforce
Adding Visualforce to a Salesforce AppExchange App
Using JavaScript in Visualforce Pages
Communicating Across the DOM with Lightning Message Service
Best Practices
Standard Component Reference
Appendices
Glossary
PDF

Newer Version Available

This content describes an older version of this product. View Latest

Using Styles from Salesforce Stylesheets

Salesforce uses different stylesheets (.css files) throughout the application to ensure that every tab conforms to the Salesforce look and feel. These stylesheets are automatically included on a Visualforce page unless you specify false for the showHeader attribute of the <apex:page> tag.

Salesforce stylesheets aren’t versioned, and the appearance and class names of components change without notice. Salesforce strongly recommends that you use Visualforce components that mimic the look-and-feel of Salesforce styles instead of directly referencing—and depending upon—Salesforce stylesheets.

Warning

When you disable the inclusion of the Salesforce stylesheets, only your custom stylesheets affect the styling of the page. For the purposes of building up styles that partially or fully match the Salesforce look and feel, you might want to look at and use selected contents from the default stylesheets.

The following stylesheets contain style classes you can reference. They are located in the /dCSS/ directory of your Salesforce instance.
  • dStandard.css – Contains the majority of style definitions for standard objects and tabs.
  • allCustom.css – Contains style definitions for custom tabs.

Salesforce doesn’t provide notice of changes to or documentation of the built-in styles. Use at your own risk.

Important