www.Expression-Web-3.com
Tutorials & Training Products
Expression Web 3 - The Cascade of CSS Styles
How the Cascade Works
To truly understand the cascade, and not just read a definition of it, I will use an example to illustrate this concept.
CSS Cascade
1.The cascade of anything requires multiple items or a series of similar items.
2. These items may be from a variety of sources yet merge together and ultimately flow together in reaching their destination.
In CSS, the cascade consists of
- 1) Multiple Styles
- 2) That are applied to the Same HTML Element.
- 3) There is conflict among 2 or more styles.
The Cascade in CSS is meant to Resolve Conflicting Styles
The Styles may be from different Style Sheets or different Style Declarations. Either way, they have the same destination. Therefore, the cascade means these multiple styles will merge together and flow together in order to apply their respective styles to the HTML Element.
Conflicting Styles
However, Style Rules may sometimes conflict with one another. In this case, the Browser must deal with this by determining which style wins. The W3C (w3.org) defines how a browser is to respond to conflicting styles.
(In technical terms, the Cascade is a mechanism put in place to resolve conflicting styles. But I want you to understand that the W3C lays out the specifications Browsers should follow so as to incorporate the Cascade appropriately. The hope is that all browsers will be built to conform to one set of Rules that we call the Cascade.)
Conflict among styles is not always a bad thing. As you will learn shortly, we will purposely create conflict in order to change something on one page without affecting the remaining web pages.
Why would we Want to Create Multiple Styles for the Same HTML Elment?
We can use the Cascade along with Inheritance in order to be more efficient and save time. For instance, consider the following Style Declaration:
margin: 0;
padding: 0;
}
The above Style has several Selectors, each of which is separated by a comma. Remember, comma means 'and'. Yet, this is only one style. It is a simple style that is used to illustrate my point. I could have added more properties such as font-family, color, etc. But let's just focus on margins and padding for simplicity.
The Style over-rides any default margins and padding that the various web browsers may apply to the Elements listed. Now, every time we create a style for any of the elements listed in the above style, we don't have to concern ourselves with zeroing the margins and padding, thus we save some time.
Now, we can make Styles that apply to the same Elements listed in the above Style Declaration. In fact, we may need to do just that in order to make very specific styles for different sections of our layout.
Example:
#header h1 {
font-size: 140%;
color: white;
letter-spacing: .3em;
}
#maincontent h1 {
font-size: 125%;
font-weight: 600;
font-variant: small-caps;
}
The Style Declarations above are applied to an <h1> heading somewhere on the layout. Now, 2 different styles have been applied to the h1 in the header and the h1 in the maincontent. The styles for the h1 merge together nicely, and without conflict.
Now let's suppose we need to change the #header h1 style on just one of our web pages.
Remember, the external style sheet, mainstyles.css, is linked to all of the web pages. This means if I change the #header h1 style, that change will be applied to every web page.
So what are we to do?
Well, if you want to change the #header h1 on only one web page, we can create an Internal Style for that particular web page.
This will cause a conflict in styles, but the Rules of the Cascade tell us how a browser deals with any conflicting styles.
Rule 1: The Style Closest to the HTML Element will Be Applied.
So if we create an Internal Style for the #header h1 element on one particular web page, it will override the External Style Sheet's #header h1 style.
An Inline Style would beat an Internal and External Style because it is closer to the HTML element.
An Internal Style would beat an External Style because it's closer to the HTML element.
**Armed with this piece of knowledge, we will use it to our benefit and change the h1 style for the header on one page only!**
Understand, we will purposely create a conflicting style. But we know that if we place this conflicting style closest to the HTML element being styled, it will over-ride the external style.
To do this, click New Style. Make the Selector #header h1, but define in the Current Page.
This will create an Internal Style (located in the <head> section) for that one web page only.
This was a very simple example. It can become much more complicated. And there are many ways we can use the Cascade to our advantage.
The rest of the
Rules of the Cascade are covered next.
