Tryangled Solutions web designing tips tricks

The cascade lets you use multiple rules to specify the properties for an element. You can either redefine the same property or define additional properties. Let’s say you have the following markup:

1. <p class=”update”>Update: Lorem ipsum dolor set</p>

In the CSS, you can use separate rules to specify the properties that are common to all p elements and those that are specific to p elements with class=”update”:

1. p {
2. margin:1em 0;
3. font-size:1em;
4. color:#333;
5. }
6. .update {
7. font-weight:bold;
8. color:#600;
9. }

The two rules will be combined for p elements with class=”update”. Since a class selector is more specific than a type selector, the properties defined in the second rule will be used when a conflict occurs, as for color in this case.

More info on how the specificity of CSS rules is calculated can be found in Calculating a selector’s specificity in the CSS 2.1 specification.

The values of many properties are inherited by any descendants of the element that you specify the property for. color and the font related properties are the most common examples of such properties.

Be aware that some properties may be overridden by browser specific user agent style sheets, i.e. the browser’s defaults. That’s why you can’t make all headings non bold with the following rule:

1. body { font-weight:normal; }

The browser’s predefined rules are more specific because of the cascade, which is described next.