--- schema_version: "1" id: 074af325c38ed2eeb05f6707c9dc14ad5e33c505d7ae0d6dc0eaaa959abcfb11 title: Use a Custom Stylesheet in a Visualforce Email Template collection: developer version: current locale: en-us portal_url: https://docs.salesforce.com/developer/current/en-us/platform/salesforce-pages-developers-guide/guides/pages/email-and-templates/pages-email-templates-stylesheets.md canonical_url: https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/guide/pages-email-templates-stylesheets.html source_site: developer.salesforce.com content_type: documentation content_hash: 92d4fe03929d7b73c77c5ef402923890dbb5b3fd0fd9a4ae3e2ca1ee2f815957 products: - Visualforce Developer Guide - Platform Developer Content --- # Use a Custom Stylesheet in a Visualforce Email Template By default, Visualforce email templates always use the standard look and feel of other Salesforce components. However, you can extend or overwrite these styles by defining your own stylesheet. Unlike other Visualforce pages, Visualforce email templates cannot use referenced [page styles](https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/styling/pages-styling.md) or [static resources](https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/resources/pages-resources.md). Although the CSS appears to render in the email template preview pane, it does not appear the same to the recipients of your email. You must define your style using CSS within `

Dear {!recipient.name},

Case NumberOrigin Creator EmailStatus
{!cx.CaseNumber} {!cx.Origin} {!cx.Contact.email} {!cx.Status}
``` ![An example of the HTML preview of an email template](https://developer.salesforce.com/media/salesforce-pages-developers-guide/pages_email_templates_stylesheet.jpg "Example of the Rendered Visualforce Email Template") ## Define Visualforce Stylesheets in a Custom Component Although you cannot reference an external stylesheet in a Visualforce email template, you can place the style definitions within a [custom component](https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/comp-cust/pages-comp-cust.md) that can be referenced in other places. For example, you can modify the previous example to place the style information in a component named `EmailStyle`. ```markup ``` Then, in the Visualforce email template, you can reference just that component: ```visualforce

Dear {!recipient.name},

... ``` **note:** Any `` tags used within a Visualforce email template must have an access level of `global`.