What is Cascading?
When applying styles to the elements <tags> of your website it is important to understand the hierarchy of how Cascading Styles are applied to elements that are inside of elements.
In standard HTML all pages will start and end with a <html> element tag and the content of the page will be placed inside of the <body> element tag.
When you apply your CSS Styles to a higher element it will be applied to all elements within it.
For example if you were to apply a font style to your <body> tag the whole page would use those settings unless you override them individually.
.body {color:#33ff33}
<body>
<p>This is some text</p>
<p style=”color:#ff33ff”>This Text has an override<p>
</body>
The styles will be applied from the outer most container to the inside container.
What about Enduser Browser CSS Files
Because both the Author and the Enduser have the ability to use and apply their own style sheets, Cascading is used to control which Style Selector will be used and which Style Selectors will be overridden.
Endusers often make changes to a Browser CSS file so they can read your pages better. For low Vision Visitors of your site they may increase the font size or they may apply font colors that allow them to read your pages easier.
Normally if the Author and Enduser apply different values to the same element the author’s settings will override the enduser’s. However because there are situations where the enduser’s settings should have a higher priority the cascading value !important can be used to set a higher weight to a certain Declaration Value.
The Author’s style
<style type=”text/css”>
P { color:#ff0000 }
</style>
The Enduser’s Style
<style type=”text/css”>
P { color:#000000 !important }
</style>
In the example above we see that the use of !important in the enduser’s style sheet is used to override the author’s setting.
The Author can also take advantage of this value to override a previously defined element by applying the !important value directly to the HTML tag.
The Author’s style defined in the head area:
<style type=”text/css”>
P { color:#ff0000 }
</style>
Author’s local override in the HTML tag:
<p style=”color: green !important” >this paragraph is green </p>
Using the !important declaration feature in your CSS can be used to work out bugs in your formatting. This declaration shown Inline above can also be used in your styles.css file.
Cascading and the Document Tree
When a page is rendered there is a hierarchical method applied to the formatting. When the browser retrieves the page it first collects the all of the style information and sorts the selectors using the cascading order to see which rule will take priority. Then the Document Tree is used to add additional weighted order.
When elements are added to a page parent elements influence the child elements so if formatting is applied to the parent element it will be inherited by the child unless the child element overrides the formatting of the parent element.
<html>
<head>
<title> CSS Document Tree </title>
<style type=”text/css”>
P { color: #ff0000 ; font-size: 18px }
</style>
</head>
<body text=”808080″>
If someone asks your over for dinner.
<p >Don’t eat the <font size=3>chicken</font>.</p>
<p ><font color=orange>Chicken </font> are people too.</p>
</body>
</html>
What it looks like:
If someone asks your over for dinner.
Don’t eat the chicken.
Chicken are people too.
In the example above you can see that the first line is inheriting its color properties from the BODY element. Then in the first paragraph the P element overrides the BODY TEXT color and finally inside the paragraph the Font element overrides the P element applying its own font size setting.
When you compare the first and second paragraphs you can see that the Font Element is used to partially override parent elements but where the Child element <font> does not override the parent element it will accept the parents formatting characteristics.
The Font element in the first Paragraph accepts the color attribute but changes the size. The Font element in the second paragraph keeps the size and changes the color.
The Document Tree for this file would be:
HTML
|
BODY
/
Body Text Paragraph
|
FONT
Final Note
It is important to remember and map out what parent elements and styles effect lower or internal tag elements. You will find when you first start that applying font information, borders, margins and other settings to parent elements they can throw you off in your design.
To find where to fix the problem work your way from the inside out until you find the style you need to change or override.
Cascading is also effected by the line number of your CSS style.css file.
Elements that appear closer to the top of the CSS file will effect elements below it. This is where the use of the !important declaration will often be used. We will go over this in more detail in a lesson about setting up your CSS style.css file.
Finally if the element is not defined by a CSS Selector the default settings of the enduser’s client are used to render the element.
