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.
<apex:page>
<apex:stylesheet value="{!$Resource.TestStyles}"/>
<apex:outputText value="Styled Text in a sample style class" styleClass="sample"/>
</apex:page>
This is the style sheet used for this example.
.sample {
font-weight: bold;
}