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>
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.
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.
body { background-image: url("images/dots.gif") }
<apex:stylesheet value="{!URLFOR($Resource.myStyles, 'styles.css')}"/>