Domain Registration : Discount Domain Pricing : Website and Domain Hosting : Frontpage 2000 Hosting : Website Development and Promotion : Secure E-Commerce : Shopping Cart Software : Linux and Windows NT : Graphic Design : Free Email Services : Fast Servers : Low Cost!


What is Cascading?

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.

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 }


The Enduser's Style

<style type="text/css">

P { color:#000000 !important }


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 }


Author's local override in the HTML tag:

<p style="color: green !important" >this paragraph is green </p>

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.



<title> CSS Document Tree </title>

<style type="text/css">

P { color: #ff0000 ; font-size: 18px }



<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>

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

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.

Copyright © 1995-2003 Sidetrips™ Internet Services, Inc. All rights reserved.

Reproduction in whole or in part in any form or medium without express
written permission of Sidetrips Internet Services, Inc. is prohibited.

sidetrips.com™, hostserver.com™, registera.com™, htmlshop.com™,
and associated domains are trademarks of Sidetrips™ Internet Service, Inc.

Privacy Policy | Acceptable Use Policy | Terms of Service