---
schema_version: "1"
id: be0af3c9bde119d69dfc1db1ea289af3b07bab823248d1ac870d1cbc71025c84
title: Styling Apps
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.md
canonical_url: https://developer.salesforce.com/docs/platform/aura-platform/guide/apps-css.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 1c278d0bb1828daf99304d249c05d3579187a92c0349a89aca5a528608605d07
products:
  - Lightning Aura Components Developer Guide
  - Platform Developer Content
---

# Styling Apps

An app is a special top-level component whose markup is in a `.app` resource. Just like any other component, you can put CSS in its bundle in a resource called `<appName>.css`.

For example, if the app markup is in `notes.app`, its CSS is in `notes.css`.

When viewed in Salesforce for Android, iOS, and Lightning Experience, the components include styling that matches those visual themes. For example, the `lightning:button` includes the `slds-button_neutral` class to display a neutral style.

**note:** Styles added to Lightning components in Salesforce for Android, iOS, and Lightning Experience don’t apply to components in standalone apps.

- **[Using the Salesforce Lightning Design System in Apps](https://developer.salesforce.com/docs/platform/aura-platform/guide/apps-slds.md)**


    The Salesforce Lightning Design System (SLDS) provides a look and feel that’s consistent with Lightning Experience. Use Lightning Design System styles to give your custom stand-alone Lightning applications a UI that is consistent with Salesforce, without having to reverse-engineer our styles.

- **[Using External CSS](https://developer.salesforce.com/docs/platform/aura-platform/guide/apps-css-external-platform.md)**


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

- **[More Readable Styling Markup with the join Expression](https://developer.salesforce.com/docs/platform/aura-platform/guide/apps-css-markup.md)**

  Markup can get messy when you specify the class names to apply based on the component attribute values. Try using a `join` expression for easier-to-read markup.

- **[Tips for CSS in Components](https://developer.salesforce.com/docs/platform/aura-platform/components/components-css-tips.md)**


    Here are some tips for configuring the CSS for components that you plan to use in Lightning pages, the Lightning App Builder, or the Experience Builder.

- **[CSS for RTL Languages](https://developer.salesforce.com/docs/platform/aura-platform/guide/apps-css-rtl.md)**


    When your Language setting in Salesforce is set to a right-to-left (RTL) language, the framework automatically flips property names, such as `left` and `border-left` to `right` and `border-right` respectively. The framework also rearranges certain values like `padding`, `margin`, and `border-radius` so that the `right` and `left` units are swapped.

- **[Styling with Design Tokens and Styling Hooks](https://developer.salesforce.com/docs/platform/aura-platform/tokens/tokens-intro.md)**


    Capture the essential values of your visual design into named tokens or global styling hooks. Reuse these values throughout your Lightning components CSS resources. Tokens and styling hooks make it easy to ensure that your design is consistent, and even easier to update your design as it evolves.

**See Also**

- [CSS in Components](https://developer.salesforce.com/docs/platform/aura-platform/components/components-css.md)