Style in Lightning Bundle

Sometimes there will be scenario where you need to define specific set of style to the tags that are used in component. This is similar to how style tags are defined in normal HTML pages or Visualforce pages. Only difference is style name definition will start with .THIS keyword. You can also define specific style tags for other devices like, mobile or tablet etc using @media.

---

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.

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.

Example:

.THIS {
    background-color: grey;
}

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

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

White and red are style class names. You can use these as part of class in different tag in UI.

For instance:

<div class="white"> div tag class is white </div>
<p class="red"> p tag class is red </p>

---

Note:

A Style is in lightning bundle is saved as componentName.css. If you component name is My_Lightning_Component, then a controller will be saved as My_Lightning_Component.css.