CSS in Components

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

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 blowing away 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

The top-level elements match the THIS class and render with a grey background.

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.