Revision f4f78449-2f58-498e-b7ae-ffe46b7b76d5

Downloading the CSS and re-uploading it as a static resource is unnecessary. You can use the SLDS stylesheets by [adding the `<apex:slds />` tag to your Visualforce page](https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_styling_slds.htm). [This is documented on the SLDS site under Visualforce](https://www.lightningdesignsystem.com/platforms/visualforce/), the download is offered if you want to use the CSS _outside_ of Salesforce.

You can also scope where you want the SLDS styles to be applied.

```html
<apex:page standardController="Account" applyBodyTag="false">
    <apex:slds /> 
 
    <!-- any Visualforce component should be outside SLDS scoping element -->
    <apex:outputField value="{!Account.OwnerId}" /> 
 
    <div class="slds-scope">
    <!-- SLDS markup here -->
    </div>
</apex:page>
 
```

**Additionally,** make sure you're using the appropriate markup for the SLDS class names. Many of the classes that use double hyphens (`--`) have been deprecated.

# EDIT #

This example works in a Community Visualforce component.

```html
<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
    <html>
        <body>
            <apex:slds />
            <apex:form id="form" styleClass="slds-scope">
                <div class="slds-modal__header">
                    <h2 class="slds-text-heading_medium">SLDS On Visualforce page</h2>
                </div>
                <div class="slds-modal__content slds-p-around_medium">
                    <apex:commandLink value="Cancel" styleClass="slds-button slds-button_brand"></apex:commandLink>
                </div>
            </apex:form>
        </body>
    </html>
</apex:page>
```