Salesforce Docs Portal

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.

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 --> 
<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 --> 
.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

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