Cascading Styles

You may be familiar with, or heard of the term “Cascading Style Sheets” or “CSS”. Web pages are styled (fonts, colors, spacing, positioning or other variables) with CSS rules – something as simple as: “font-family: Arial”, or “color: red” – but can also be much more complex to include positioning and even animations and special effects. The “cascading” part of the term means that you can set styles globally for an entire website, but can override those styles with additional style sheets, the Customizer, plugin styles, or inline styles. 

Theme Styles

Your Cadenza website is built on the main Cadenza Theme. Built into this theme are certain style rules, in the Cadenza Theme CSS file, that define many of the basic elements of the web site including how rows and columns are spaced, how text and images align, and where certain page elements like headers and footers display. Many of these definitions are based on the Bootstrap framework of CSS definitions. The theme styles set the foundation for how your site displays and reacts on different screens.

Customizer Settings

The Customizer is the primary tool for redefining some of the styles in the Cadenza Theme CSS. This is the “cascading” part of CSS. When you change a definition in the Customizer, such as increasing a font size, your new rule is applied in place of the old style.

Page Builder Settings

If you are using the Page Builder to create web pages, many rows  and modules give you the option to further change the style of an individual element, such as a the color of a font in a heading. Changing these settings further overrides both the Cadenza Theme CSS styles and Customizer styles. These are in effect “inline styles” (see next), except that you don’t see or have to edit any code. Just change the setting in the module or row and your styles changes will take effect.

Inline Styles

Inline Styles are made within your written content, to temporarily override any global Theme CSS, Customizer style and/or Row or Module style. For example, if you wanted to make a certain phrase or word stand out, you can select that phrase or word and easily change its color (which looks like this: <span style="color: #00b2b2;">change its color</span>) with the text editor. Inline styles apply only to the selected elements, just once. If you want to make the same change to other elements, then you have to make the Inline Style change again, each time.

Set It and Forget It!

Its important to remember that you do not have to set fonts, sizes and colors throughout your website. Unlike popular word processing applications, it is best practice to set styles globally. Only make changes to fonts, sizes and colors when absolutely necessary, like to add emphasis to a phrase or improve color contrast. Making a lot of inline style changes will add unnecessary code bulk to your site. Most style definitions are based on your selected Theme, so let CSS and the Customizer do most of the work for you and redefine only those few elements that need to be adjusted.

Warning – Music Analogy!

Think of the Theme CSS like the key signature of a piece of music. It establishes the key of the piece, defining the naturals, flats or sharps you should play – you don’t have to add them to every note throughout your music! The Customizer is like a making key change, overriding the original style rule (or key signature). Accidentals are like Inline Styles. They only affect a single element just once*, then its back to the Theme CSS or the Customizer rules again.

* Of course, we know that an accidental applies to the same pitch if it repeats within a measure until a new bar line, but the analogy is still pretty solid!