Visualforce Developer Guide
jNote: 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.
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.
The following markup shows a very basic page. The <apex:stylesheet> tag references a CSS stylesheet that is saved as a static
resource named TestStyles and listed on the Static Resources page. It’s referenced by the
$Resource global variable in the <apex:stylesheet> tag’s value attribute. The styleClass attribute
of the <apex:outputText> tag uses the sample style
class defined in the style sheet.
1<apex:page>
2 <apex:stylesheet value="{!$Resource.TestStyles}"/>
3 <apex:outputText value="Styled Text in a sample style class" styleClass="sample"/>
4</apex:page>This is the style sheet used for this example.
1.sample {
2 font-weight: bold;
3}