Using Custom Styles

If you don’t want a page to have the Salesforce look and feel, specify false for the showHeader attribute on the <apex:page> tag, and then use the <apex:stylesheet> tag or HTML to include your own stylesheet and body.

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>

The following example shows how to reference a stylesheet that is defined as a static resource. First, create a stylesheet like the one below 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="http://www.salesforce.com" styleClass="newLink">
        Click here to switch to www.salesforce.com
    </apex:outputLink>
</apex:page>

Tip

To shrink the size of your page, you can prevent the standard Salesforce stylesheets from loading by setting the standardStylesheets attribute on the <apex:page> component to false:

<apex:page standardStylesheets="false">
    <!-- page content here -->
</apex:page>

Note that if you don’t load these style sheets, components that require Salesforce CSS might not display correctly, and their styling may change between releases.

All Visualforce components that produce HTML have pass-through style and styleClass attributes. They allow you to use your own styles and style classes to control the look and feel of any HTML tag. For example, the following code sets the class of the <apex:outputText> and applies a style:

<apex:page>
    <style type="text/css">
        .italicText { font-style: italic; }
    </style>
    <apex:outputText styleClass="italicText" value="This is kind of fancy."/>
</apex:page>

If you want to apply a style using a DOM ID, you must use CSS attribute selectors for the style definition. Attribute selectors rely on the definition of an attribute, rather than an HTML tag, to apply a CSS style. You can set the id value on any Visualforce component; however, that id is sometimes preprended with the id of parent components. For instance, the id of the following code is j_id0:myId:

<apex:page>
    <apex:outputText id="myId" value="This is less fancy."/>
</apex:page>

Your CSS should take this into consideration by using an attribute selector:

<apex:page>
    <style type="text/css">
        [id*=myId] { font-weight: bold; }
    </style>
    <apex:outputText id="myId" value="This is way fancy !"/>
</apex:page>

If you intend to use images in your stylesheet, zip the images with the CSS file and upload it as a single static resource. For example, if your CSS file has a line like the following:

body { background-image: url("images/dots.gif") }

Add the entire images directory and the parent CSS file into a single zip file. For example, if the zip file resource name is myStyles, refer to it like this:

<apex:stylesheet value="{!URLFOR($Resource.myStyles, 'styles.css')}"/>

Warning

If a stylesheet has an empty string in a url value, you won’t be able to render that page as a PDF. For example, the style rule body { background-image: url(""); } will prevent any page that includes it from being rendered as a PDF.