---
schema_version: "1"
id: 7388e7116b17dcac0b187286facc769ab08692880f70b9d40fc84765adc6a341
title: Using External CSS
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/platform/aura-platform/guides/aura/apps/apps-css-external-platform.md
canonical_url: https://developer.salesforce.com/docs/platform/aura-platform/guide/apps-css-external-platform.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: f00478b7176d0db97a5f6112c37d5f75cd338c197f153fc274fc85361fa7939c
products:
  - Lightning Aura Components Developer Guide
  - Platform Developer Content
---

# Using External CSS

To reference an external CSS resource, upload it as a static resource and use a `<ltng:require>` tag in your `.cmp` or `.app` markup.

`ltng:require` enables you to load external CSS and JavaScript libraries for your component or app.

**important:** You can’t load JavaScript resources from a third-party site, even if it’s a CSP Trusted Site. To use a JavaScript library from a third-party site, add it to a static resource, and then add the static resource to your component. After the library is loaded from the static resource, you can use it as normal.

## Example

Here’s an example of using `ltng:require`:

```nolang
<ltng:require styles="{!$Resource.resourceName}" />
```

_resourceName_ is the `Name` of the static resource. In a managed package, the resource name must include the package namespace prefix, such as `$Resource.yourNamespace__resourceName`. For a stand-alone static resource, such as an individual graphic or script, you only need the name of the resource. For example, if you uploaded `myScript.js` and set the `Name` to `myScript`, reference it as `$Resource.myScript`. To reference an item within an archive static resource, add the rest of the path to the item using string concatenation.

## Considerations for Loading Styles

**Loading Sets of CSS:** Specify a comma-separated list of resources in the `styles` attribute to load a set of CSS.

**note:** Due to a quirk in the way `$Resource` is parsed in expressions, use the `join` operator to include multiple `$Resource` references in a single attribute. For example, if you have more than one style sheet to include into a component the `styles` attribute should be something like the following.

```nolang
styles="{!join(',',
    $Resource.myStyles + '/stylesheetOne.css',
    $Resource.myStyles + '/moreStyles.css')}"
```

**Loading Order:** The styles are loaded in the order that they are listed.

**One-Time Loading:** The styles load only once, even if they’re specified in multiple `<ltng:require>` tags in the same component or across different components.

**Encapsulation:** To ensure encapsulation and reusability, add the `<ltng:require>` tag to every `.cmp` or `.app` resource that uses the CSS resource.

`ltng:require` also has a `scripts` attribute to load a list of JavaScript libraries. The `afterScriptsLoaded` event enables you to call a controller action after the `scripts` are loaded. It's only triggered by loading of the `scripts` and is never triggered when the CSS in `styles` is loaded.

## Styling Components for Lightning Experience or Salesforce for Android, iOS, and mobile web

To prevent styling conflicts in Lightning Experience or Salesforce for Android, iOS, and mobile web, prefix your external CSS with a unique namespace. For example, if you prefix your external CSS declarations with `.myBootstrap`, wrap your component markup with a `<div>` tag that specifies the `myBootstrap` class.

```nolang
<ltng:require styles="{!$Resource.bootstrap}"/>
<div class="myBootstrap">
    <c:myComponent />
    <!-- Other component markup -->
</div>
```

**note:** Prefixing your CSS with a unique namespace only applies to external CSS. If you’re using CSS within a component bundle, the `.THIS` keyword becomes `.namespaceComponentName` during runtime.

**See Also**

- [Using External JavaScript Libraries](https://developer.salesforce.com/docs/platform/aura-platform/js/js-libs-platform.md)
- [CSS in Components](https://developer.salesforce.com/docs/platform/aura-platform/components/components-css.md)
- [\$Resource](https://developer.salesforce.com/docs/platform/aura-platform/expr/expr-resource-value-provider.md)