---
schema_version: "1"
id: 0c1c2ae333cac99f7178efb8a3799e4514a96954909b47161c5266125a404789
title: Using Custom Styles
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-custom.md
canonical_url: https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/guide/pages-styling-custom.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: b1dbb2b34ad18afe319adc7fb870fcbc76dd10b3599bc7e4418fc724c3e0b14a
products:
  - Visualforce Developer Guide
  - Platform Developer Content
---

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

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

```visualforce
h1 { color: #f00; }
p { background-color: #eec; }
.newLink { color: #f60; font-weight: bold; }

```

Next, create a page that refers to this static resource.

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

**tip:** If you’re not using Salesforce styles, you can shrink your page size by preventing the standard Salesforce style sheets from loading. To prevent loading, set the `standardStylesheets` attribute on the `<apex:page>` component to false.

```visualforce
<apex:page standardStylesheets="false">
    <!-- page content here -->
</apex:page>
```

If you don’t load the Salesforce style sheets, components that require them don’t display correctly.

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.

<!-- otherprops: apex_page set_clipboard -->
```markup
<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](https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/guide/pages-styling-custom-using-component-id.md#defining-styles-for-a-components-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.

```visualforce
body { background-image: url("images/dots.gif") }

```

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.

```visualforce
<apex:stylesheet value="{!URLFOR($Resource.myStyles, 'styles.css')}"/>
```

**note:** If a style sheet has an empty string in a `url` value, you can’t render that page as a PDF. For example, the style rule `body { background-image: url(""); }` prevents any page that includes the rule from being rendered as a PDF.

**See Also**  


-   [Extending Salesforce Styles with Stylesheets](https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/guide/pages-styling-adding-stylesheets.md)
-   [Suppressing the Salesforce User Interface and Styles](https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/guide/pages-styling-suppressing-salesforce-stylesheets.md)
-   [Defining Styles for a Component’s DOM ID](https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/guide/pages-styling-custom-using-component-id.md)