CSS Primer for Lightning Developers: The “Cascading” Part of Cascading Style Sheets

If CSS stands for Cascading Style Sheets, what does the “Cascading” part mean? To start, there are three ways in which CSS styles can be applied to HTML documents: Inline styles, internal style sheets and external style sheets.

We will discuss not only the three ways of applying styles to HTML documents, but also the order in which CSS styles are applied to HTML elements. This is one of the most misunderstood aspects of CSS but it is actually fairly straightforward.

Inline Styles

Inline styles are hardcoded within the style attribute of a single HTML element. Within the style attribute, any CSS property can be defined.

An example of using inline styles:


<span style="font-family: sans-serif; font-size: 14pt;">

    An example of inline styles.

</span>

Internal Style Sheets

Internal style sheets are responsible for the styling of a single page and are defined in the <head> tag of an HTML document.

An example of using internal styles:


<head>


<style>


body {

    
font-family: sans-serif;
    font-size: 14pt;


}



p {


    color: red;


}


</style>


</head>

External Style Sheets

External style sheets are reusable and can be applied to many pages across a website.

When developing Lightning Components, we will load external CSS style sheets using Static Resources and the <ltng:require> tag that we learned about in Chapter 3.

The Style resource in the component bundle also serves as an external style sheet, which will be described in greater detail later in this chapter.

An example of loading an external CSS style sheet in HTML:


<head>

    <link rel="stylesheet" type="text/css" href="styles.css">

</head>

An example of loading an external CSS style sheet in Lightning:


<aura:component>

    <ltng:require styles="{!$Resource.Styles}" />

</aura:component>

Ordering of CSS Styles

One of the potentially confusing aspects of CSS is understanding the order in which styles are applied to HTML elements.

For the most part, CSS styles are applied to an HTML element according to the following priorities:

  • Any inline style defined in the “style” attribute will take top priority over styles defined in internal or external style sheets.
  • If there is no inline style specified for an HTML element, styles defined in external style sheets loaded from files or internal style sheets contained in the <head> tag will take next priority and be applied to the element. Remember, in Lightning Components, the Style resource in the component resource is treated as an external style sheet.
  • If there are no inline styles, external style sheets, or an internal style sheet, the browser default style will be applied to the HTML element.

What this means is that if an element has an inline style defined as well as a style in an external style sheet, the inline style will be applied because it is of a higher priority than the external style sheet or the browser default.

Multiple Style Sheets

So what happens if there is no inline style defined for an HTML element, but there are conflicting styles for the same HTML element in the internal style sheet or multiple external style sheets?

Luckily this is pretty straightforward with CSS. If there are multiple styles defined for an element in multiple style sheets, the style from the last read style sheet will be loaded.

What this means is that your style sheets follow a last-in-first out priority. If the order in which styles are applied from your external styles sheets matters, then you need to make sure the highest priority style sheet is read last.

!important

Have you ever come across the !important keyword and wondered what it meant?

Simply speaking, using !important for a CSS rule ensures that the style will always be applied regardless of the ordering of the CSS styles. For example, if you have both an inline style defined for an HTML element as well as a style in an external style sheet, normally the inline style would take precedence – but if the external style was marked as !important, it would be applied to the HTML element.

When multiple instances of !imporant are found, the basic rules of style precedence will apply and the last instance of a style annotated with !important will be applied.

Please don’t abuse !important. There is nothing worse than coming across a CSS style sheet where everything is marked with the !important keyword. If everything is important, then nothing is important.

Inheritance

Inheritance occurs when CSS properties are passed from parent elements to child elements, even when there is no explicit reference to these properties in the child elements.

Inheritance is what allows us to define styles once at a high level without having to reapply styling rules to each individual element. Some properties inherit values implicitly, others can be set to explicitly inherit values from a parent element.

It is important to note that inheritance is a separate concept from cascading, and it applies to HTML elements in the Document Object Model (DOM) tree rather than style sheet rules.

Mike Topalovich
Hi, I’m Mike. I help companies like yours do business in new ways with Salesforce.

I am a freelance Salesforce Developer, Architect, and CTO as well as a part time instructor for Salesforce University.

Connect with me today to discuss how I can become a part of your team on an ongoing retainer basis.
Mike Topalovich on EmailMike Topalovich on FlickrMike Topalovich on LinkedinMike Topalovich on RssMike Topalovich on Twitter

Leave a Reply