---
schema_version: "1"
id: 4866a821e1ba7752d69b0615f03206cc3467b3488102ca012ba799ad9cc1adb1
title: Extending Salesforce Styles with Stylesheets
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/platform/salesforce-pages-developers-guide/guides/pages/styling/pages-styling-adding-stylesheets.md
canonical_url: https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/guide/pages-styling-adding-stylesheets.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 9ca2f0c53653dad6366ecbcf2a534a40e9a17e3767c5ba659d1ac8e1b3b6c357
products:
  - Visualforce Developer Guide
  - Platform Developer Content
---

# 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.

<!-- otherprops: resourceName=TestStyles apex_page set_clipboard -->
```markup
<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.

```visualforce
.sample {
    font-weight: bold;
}
```

**See Also**  


-   [Using Custom Styles](https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/guide/pages-styling-custom.md)