Visualforce Developer Guide

Clouds with binary code floating aboveCloud with binary code floating above

No Results

Search Tips:

  • Please consider misspellings
  • Try different search keywords
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
Change the MIME type of Your Visualforce Page
Setting Custom HTML Attributes on Visualforce Components
Render a Visualforce Page as a PDF File
Standard Controllers
Standard List Controllers
Custom Controllers and Controller Extensions
Advanced Examples
Override Buttons, Links, and Tabs with Visualforce
Using Static Resources
Creating and Using Custom Components
Dynamic Visualforce Bindings
Dynamic Visualforce Components
Integrate 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
Visualforce Best Practices
Standard Visualforce Component Reference
Appendices
PDF

Using Custom Styles

Use the <apex:stylesheet> tag or static HTML to include your own style sheet or styles.
For HTML tags, you can define inline CSS code, just like in a regular HTML page.
<apex:page>
    <style type="text/css">
        p { font-weight: bold; }
    </style>

    <p>This is some strong text!</p>
</apex:page>
This example references a style sheet that is defined as a static resource. First, create a style sheet and upload it as a static resource named customCSS.
h1 { color: #f00; }
p { background-color: #eec; }
newLink { color: #f60; font-weight: bold; }
Next, create a page that refers to this static resource.
<apex:page showHeader="false">
    <apex:stylesheet value="{!$Resource.customCSS}" />
    <h1>Testing Custom Stylesheets</h1>
    <p>This text could go on forever...<br/><br/>
       But it won't!</p>

    <apex:outputLink value="https://salesforce.com" styleClass="newLink">
        Click here to switch to www.salesforce.com
    </apex:outputLink>
</apex:page>
If you’re not using Salesforce styles, you can shrink your page size by preventing the standard Salesforce style sheets from loading. To prevent loading, set the standardStylesheets attribute on the <apex:page> component to false. If you don’t load the Salesforce style sheets, components that require them don’t display correctly.
<apex:page standardStylesheets="false">
    <!-- page content here -->
</apex:page>

Tip

Visualforce components that produce HTML have pass-through style and styleClass attributes. These attributes allow you to use your own styles and style classes to control the look and feel of the resulting HTML. style allows you to set styles directly on a component, while styleClass lets you attach classes for styles defined elsewhere. For example, the following code sets the class of the <apex:outputText> and applies a style.
<apex:page>

    <style type="text/css">
        .asideText { font-style: italic; }
    </style>

    <apex:outputText style="font-weight: bold;" 
        value="This text is styled directly."/>

    <apex:outputText styleClass="asideText" 
        value="This text is styled via a stylesheet class."/>

</apex:page>

To apply a style using a DOM ID, use CSS attribute selectors for the style definition. See Defining Styles for a Component’s DOM ID.

If you intend to use images in your style sheet, zip the images with the CSS file, and upload the file as a single static resource. For example, suppose your CSS file has a line like the following.
body { background-image: url("images/dots.gif") }
Combine the entire images directory and the parent CSS file into a single zip file. In this example, the zip file resource name is myStyles.
<apex:stylesheet value="{!URLFOR($Resource.myStyles, 'styles.css')}"/>

If a style sheet has an empty string in a url value, you can’t render that page as a PDF. For example, the style rule body { background-image: url(""); } prevents any page that includes the rule from being rendered as a PDF.

Warning