---
schema_version: "1"
id: cd8118f0dcb10e083ea746bace70b1b4be8af76864e1f8e5eea54646fb2af58b
title: CSS in Components
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/platform/aura-platform/guides/aura/components/components-css.md
canonical_url: https://developer.salesforce.com/docs/platform/aura-platform/guide/components-css.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 5c278fa02a15d031f6ddcc10c4b420a01830918aab45a67d87f6c937eac20584
products:
  - Lightning Aura Components Developer Guide
  - Platform Developer Content
---

# CSS in Components

Style your components with CSS.

Add CSS to a component bundle by clicking the **STYLE** button in the Developer Console sidebar.

**note:** You can’t add a `<style>` tag in component markup or when you dynamically create a component in JavaScript code. This restriction ensures better component encapsulation and prevents component styling interfering with the styling of another component. The `<style>` tag restriction applies to components with API version 42.0 or later.

For external CSS resources, see [Styling Apps](https://developer.salesforce.com/docs/platform/aura-platform/apps/apps-css.md).

All top-level elements in a component have a special `THIS` CSS class added to them. This, effectively, adds namespacing to CSS and helps prevent one component's CSS from overriding another component's styling. The framework throws an error if a CSS file doesn't follow this convention.

Let's look at a sample `helloHTML.cmp` component. The CSS is in `helloHTML.css`.

**Component source**

<!-- otherprops: set_clipboard -->

```nolang
<aura:component>
  <div class="white">
    Hello, HTML!
  </div>

  <h2>Check out the style in this list.</h2>

  <ul>
    <li class="red">I'm red.</li>
    <li class="blue">I'm blue.</li>
    <li class="green">I'm green.</li>
  </ul>
</aura:component>


```

**CSS source**

<!-- otherprops: set_clipboard -->

```nolang
.THIS {
    background-color: grey;
}

.THIS.white {
    background-color: white;
}

.THIS .red {
    background-color: red;
}

.THIS .blue {
    background-color: blue;
}

.THIS .green {
    background-color: green;
}

```

**Output**

![helloHTML output](https://developer.salesforce.com/media/aura-platform/nested1.png)

The top-level elements, `h2` and `ul`, match the `THIS` class and render with a grey background. Top-level elements are tags wrapped by the HTML `body` tag and not by any other tags. In this example, the `li` tags are not top-level because they are nested in a `ul` tag.

The `<div class="white">` element matches the `.THIS.white` selector and renders with a white background. Note that there is no space in the selector as this rule is for top-level elements.

The `<li class="red">` element matches the `.THIS .red` selector and renders with a red background. Note that this is a descendant selector and it contains a space as the `<li>` element is not a top-level element.

**See Also**

- [Adding and Removing Styles](https://developer.salesforce.com/docs/platform/aura-platform/js-cb/js-cb-styles.md)
- [HTML in Components](https://developer.salesforce.com/docs/platform/aura-platform/guide/components-html.md)