---
schema_version: "1"
id: d67cb16d821501de1663f5f80bde1c909ee4745c2af1a70926db08b3918f9ae8
title: Apply Lightning Stylesheets to Visualforce Pages Manually
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/lex_prepare_vf_styling.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.lex_prepare_vf_styling.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: e059d7be821d8b5e08ba57664f3ebe2bc6f6d730b210cecf0ace85e77cb1781b
description: With Lightning stylesheets, it’s easy to tweak your existing Visualforce pages so they’ll display with classic styling in Salesforce Classic and Lightning styling in Lightning Experience.
products:
  - Salesforce Platform
  - Cross Cloud
release: "264"
---
# Apply Lightning Stylesheets to Visualforce Pages Manually

With Lightning stylesheets, it’s easy to tweak your existing Visualforce pages so they’ll display with classic styling in Salesforce Classic and Lightning styling in Lightning Experience.

### Required Editions

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small edition"><colgroup><col></colgroup><tbody><tr class=""><td class="slds-cell-wrap" style="vertical-align:top;">Available in: <strong>Group</strong>, <strong>Professional</strong>, <strong>Enterprise</strong>, <strong>Performance</strong>, <strong>Unlimited</strong>, and <strong>Developer</strong> Editions</td></tr></tbody></table>

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small permission">
        <colgroup>
          <col style="width:50%">
          <col style="width:50%">
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="colgroup" class="slds-cell-wrap" colspan="2" style="text-align:center;vertical-align:top;" id="d69277e53">User Permissions Needed</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="User Permissions Needed" class="slds-cell-wrap" style="vertical-align:top;" headers="d69277e53 ">To create, edit, or delete Visualforce pages:</td>
            <td class="slds-cell-wrap" style="vertical-align:top;" headers="d69277e53 ">Customize Application</td>
          </tr>
        </tbody>
      </table>

1. From Setup, enter Visualforce in the **Quick Find** box, then select **Visualforce Pages**.
2. Click **Edit** next to the Visualforce page.
3. Add the lightningStylesheets="true" attribute to the initial <apex:page> component in the Visualforce markup.
    
    ```markup
    <apex:page standardController="Account" lightningStyleSheets="true">
    ```
4. Save your changes.

When Lightning stylesheets are applied, here’s how a Visualforce page looks in Salesforce Classic.

![Screenshot of how a Visualforce page that's using the Lightning stylesheets looks in Salesforce Classic.](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-setup-264-0-0-production-enus/6f21df35-9ea0-4f53-ac94-45c3b5dfd5bc/setup/images/VF_Stylesheet_Before.png)

And here’s how the same page appears in Lightning Experience.

![Screenshot of how a Visualforce page that's using the Lightning stylesheets looks in Lightning Experience.](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-setup-264-0-0-production-enus/6f21df35-9ea0-4f53-ac94-45c3b5dfd5bc/setup/images/VF_Stylesheet_After.png)

#### See Also

- [_Style Existing Visualforce Pages with Lightning Stylesheets_ in the _Visualforce Developer Guide_](https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/vf_dev_best_practices_slds_lightningstylesheets.htm)