Visualforce Developer Guide
jWinter '27 preview (API version 68.0)
Summer '26 (API version 67.0)
Spring '26 (API version 66.0)
Winter '26 (API version 65.0)
Summer '25 (API version 64.0)
Spring '25 (API version 63.0)
Winter '25 (API version 62.0)
Summer '24 (API version 61.0)
Spring '24 (API version 60.0)
Winter '24 (API version 59.0)
Summer '23 (API version 58.0)
Spring '23 (API version 57.0)
Winter '23 (API version 56.0)
Summer '22 (API version 55.0)
Spring '22 (API version 54.0)
Winter '22 (API version 53.0)
Summer '21 (API version 52.0)
Spring '21 (API version 51.0)
Winter '21 (API version 50.0)
Summer '20 (API version 49.0)
Spring '20 (API version 48.0)
Winter '20 (API version 47.0)
Summer '19 (API version 46.0)
Spring '19 (API version 45.0)
Winter '19 (API version 44.0)
Summer '18 (API version 43.0)
Spring '18 (API version 42.0)
Winter '18 (API version 41.0)
Summer '17 (API version 40.0)
Spring '17 (API version 39.0)
Winter '17 (API version 38.0)
Summer '16 (API version 37.0)
Spring '16 (API version 36.0)
Winter '16 (API version 35.0)
Summer '15 (API version 34.0)
Spring '15 (API version 33.0)
Winter '15 (API version 32.0)
Spring '14 (API version 30.0)
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
Using a Custom Doctype
Change the MIME type of Your Visualforce Page
Setting Custom HTML Attributes on Visualforce Components
Note: This release is in preview. Features described here don’t become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can’t guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.
Styling Visualforce Pages
It’s easy to style a Visualforce
page, either by mimicking the look and feel of a standard Salesforce page, or by using your own
stylesheets or content types.
Many Visualforce components have a style or styleClass attribute. Defining either of these attributes allows you to associate CSS code with the component. Custom CSS code enables you to change the default visual style of a component, including its width, height, color, and font.
-
Using Salesforce Styles
Many Visualforce components already have the look and feel of the same components in Salesforce, such as the related list in a detail page, or a section header. Part of the styling of these components, including the component’s color scheme, is based on the tab on which the component appears. You can specify the tab style that should be used to style a component by associating a page with a standard controller, or by setting the tabStyle attribute on the <apex:page> or <apex:pageBlock> tags. -
Extending Salesforce Styles with Stylesheets
Use the <apex:stylesheet> tag to add additional stylesheets to a page. Use the style or styleClass attribute available on most Visualforce components to connect them to style definitions in your stylesheets. This technique lets you extend the Salesforce styles with your own. -
Using the Lightning Design System
Use the <apex:slds> element to incorporate the Lightning Design System in your Visualforce pages and align them with the styling of Lightning Experience. This component is a streamlined alternative to uploading the Lightning Design System as a static resource and using it in your Visualforce pages. -
Style Existing Visualforce Pages with Lightning Experience Stylesheets
You can control whether a page is styled with the look of Lightning Experience when viewed in Lightning Experience or the Salesforce mobile app with the lightningStylesheets attribute. -
Using Custom Styles
Use the <apex:stylesheet> tag or static HTML to include your own style sheet or styles. -
Suppressing the Salesforce User Interface and Styles
By default, Visualforce pages adopt the same visual styling and user interface “chrome” as the rest of Salesforce. This default styling behavior lets you create pages that look like they’re built right into Salesforce. If you don’t want a page to have the Salesforce look and feel, you can suppress various aspects of the Salesforce page and visual design. -
Defining Styles for a Component’s DOM ID
Use CSS attribute selectors for the style definition if you want to apply a style using a DOM ID. Attribute selectors rely on the definition of an attribute, rather than an HTML tag, to apply a CSS style. -
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. -
Identifying the Salesforce Style Your Users See
When you’re creating a Visualforce page, it’s often useful to know the Salesforce look and feel your user expects, in order to render a page that matches their style. For example, some users have the choice to customize their look and feel. You’ll need to design your Visualforce pages to take these differences into consideration. -
Determining the Salesforce Style That Users See in JavaScript
If you use a lot of JavaScript in your pages and apps, identifying the Salesforce theme that a user sees in JavaScript code is important. Identifying the current user experience context allows you to correctly manage navigation in your JavaScript code.