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}

See Also

Using Custom Styles