CSS TUTORIAL 4 – THE CASCADE IN ACTION
You will see how styles interact and how they can sometimes conflict to create unexpected results. First, you will create two styles and see how some properties are inherited and how others are overruled by the cascade. Then you will see how inheritance affects tags on a page, and how a browser resolves any CSS conflicts. Finally, you will learn how to troubleshoot problems created by the cascade.
Creating a Hybrid Style
In this example, you will create two styles. One style formats all the paragraphs of the page; and another, more specific style, reformats two paragraphs in a particular spot on the page.
Using your HTML editor, open the file cascade.html.
You will start by creating an internal style sheet.
Click directly after the closing </title> tag. Press Enter (Return), and then type:
<style type="text/css">
It is a good idea to write both the opening and closing style tags before you start adding styles. This will help you avoid the sometimes common problem of forgetting to add the closing style tag - a mistake that leads to all sorts of strange display problems in web browsers.
Press Enter (Return) twice, and then type </style>.
Now you will add a basic tag style to format the paragraphs of text on the page.
Place your cursor in the empty line between the opening and closing style tags. Type the following style:
p {
font-family: Arial, Helvetica, sans-serif;
font-size: .9em;
line-height: 175%;
color: #73AFB7;
}
The CSS line-height property sets the leading or space between lines of text.
Preview the page in a web browser.
All of the paragraphs should be formatted using Arial, and a light blue colour. There should also be a greater-than-usual amount of space between each line in a paragraph. That is the line-height property in action.
Next, you will create a style for the paragraphs that appear inside a special area of the page - a <div> tag with an ID of note. (The <div> is already part of the HTML of this page.)
Return to your HTML editor, click directly after the end of the new <p> tag style, and press Enter (Return) to create an empty line. Add the following style:
#note p {
line-height: normal;
color: #993366;
}
You have just created a descendentselector that formats all <p> tags that appear inside of a tag with an ID of note applied to it. In other words, only the paragraphs that are inside the <div> on this page are affected by these instructions.
Notice that this style has two properties - line-height and color - that conflict with the instructions provided in the p style you created earlier. To see how a browser deals with this conflict, you should preview the page in a web browser.
You will notice that the two paragraphs that appear below the headline "JustSay NoTo Bamboo" are purple, and that the paragraphs are less spaced out than other paragraphs on the page. Their line-height is also smaller than the other paragraphs.
Because the #note p style is more specific, its properties are more important than the simple p style. So in the case where there is a conflict - the line-height and color - the #note p properties win out.
However, since #note p doesnot assign values to the font-family or font-size properties, those properties in the p tag style are applied to the two paragraphs. According to the rules of the cascade, properties from multiple stylesthe p and #notep stylescombine to create a hybrid style.
Combining Cascading and Inheritance
CSS properties can accumulate or add-up due to inheritance as well. In other words, as a tag inherits properties from surrounding tags (its ancestors), those properties mix (and perhaps conflict) with styles purposely applied to the tag. You will create a style that will be inherited by all the tags on the page, and you will see how, in the case of conflicts, some properties from that style are ignored.
Return to your HTML editor and the cascade.html file.
You will now add a new tag style for the <body> tag.
Add the following style to the internal style sheet below the #note p style you just added:
body {
color: #000066;
letter-spacing: 1px;
}
This sets an overall text colour for the page, and adds one pixel of space between each letter, spreading the letters out a little on the page. Both these properties are inherited, so any tags inside the <body> tag will display these properties.
Preview the page in a web browser to see the effect.
Notice that the letters that appear in the headlines and paragraphs are spaced apart a small amount, creating an 'airy' quality to the text. That is the effect of all of the tags inheriting the letter-spacing property.
However, the color property, although inherited by the paragraph tags, isnot applied to them because it conflicts with more specific rules - the color properties set in the p and #note p styles.
A - CSS Tutorial 4 - The cascade in action.docVersion 1
Page 1 of 5