Cascading

The appearance of your output does not come from just a single stylesheet in your Flare project. Rather, it is produced from style settings originating from other places as well. Not only that, but style settings can be set in the same stylesheet in different ways. These various settings “cascade” (combine) to give the content its final look.

However, it is possible, even likely, that you will have conflicting style settings at times (e.g., one style says “red” while another says “blue”). Therefore, certain rules about importance, origin, specificity, etc. dictate which style “wins” in the end.

Our purpose here is not to provide an exhaustive explanation of cascading. You can refer to many sources on the internet for that level of knowledge. But let’s go over some basics.

[Menu Proxy — Headings — Online — Depth3 ]

Importance

The following syntax is used in CSS to make sure that a particular style setting always wins over other conflicting settings.

Copy 
!important

Here is an example.

Copy 
padding: 10px !important;

Origin

Next, consider the origin of the style settings. Precedence is given to settings in this order:

  1. Custom stylesheets in Flare projects
  2. Factory stylesheets (located where Flare was installed)
  3. Browser settings

For example, if the browser setting says a particular style should be 12 pixels, a factory stylesheet says 14 pixels, and your custom stylesheet says 16 pixels, the content will end up being 16 pixels, because that stylesheet carries the most weight.

Ways to Apply CSS

Now consider how styles or stylesheets are applied to a particular content file. In Flare, you are most likely to link your content files to a custom external stylesheet (usually located in the Resources folder in the Content Explorer). However, CSS also lets you embed stylesheets in HTML documents, or set styles inline. Here is the order of precedence:

  1. Inline
  2. Embedded
  3. Linked external stylesheets

For example, what if you use the inline method to set paragraphs to green, but then you use the linked external stylesheet method to set paragraphs to blue? Inline has precedence over embedded styles, and embedded styles have precedence over external stylesheets. So in this case, the paragraphs will be green.

Therefore, if you make changes in your custom stylesheet in Flare and notice that the look is not being changed, you might check to see if an inline or embedded style setting is overriding it.

Specificity

Also, consider the specificity of selectors in a stylesheet. Here is the basic order of precedence:

  1. Style attribute
  2. IDs (see Important Style Terms and Concepts)
  3. Classes (see Important Style Terms and Concepts)
  4. Type (element) selectors (see Important Style Terms and Concepts)

Attributes set on an HTML tag are the most specific. IDs are more specific than classes, which are more specific than element selectors. Therefore, a style attribute will win if there is a conflict because it has the most specificity.

Source Order

Another important factor is that of the order of appearance. If the same level of specificity happens to occur, the rule that appears last in the stylesheet order of the HTML document wins.

Inheritance

And finally, keep in mind that inheritance also plays a role in how the content will eventually look in the output. See Inheritance.