Lightning Aura Components Developer Guide

What Is the Lightning Component Framework?
Quick Start
Creating Components
Component Names
Create Aura Components in the Developer Console
Create Aura Components Using Salesforce CLI
Component Markup
Component Namespace
Component Bundles
Component IDs
HTML in Components
CSS in Components
Component Attributes
Using Expressions
Component Composition
Component Body
Component Facets
Controlling Access
Using Object-Oriented Development
Best Practices for Conditional Markup
Aura Component Versioning for Managed Packages
Base Components with Minimum API Version Requirements
Validations for Aura Component Code
Using Labels
Localization
Working with Base Lightning Components
Supporting Accessibility
Writing Documentation for the Component Library
Using Components
Communicating with Events
Communicating Across the DOM with Lightning Message Service
Creating Apps
Styling Apps
Developing Secure Code
Using JavaScript
Working with Salesforce Data
Testing Components with Lightning Testing Service
Debugging
Performance
Reference
PDF

Newer Version Available

This content describes an older version of this product. View Latest

CSS in Components

Style your components with CSS.

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

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.

Note

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

CSS source

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.