246996016-HTML5-Step-by-Step

Creating Styles for Nested Tags 91
Creating Styles for Nested Tags
Sometimes you might want to apply a specific formatting only when one tag is nested
within another. For example, perhaps you want a bulleted list that’s nested within another
bulleted list to use a different bullet character.
If you simply created a rule for the entire tag, all text to which this tag has been applied
would be formatted the same way. For example, if you created a style for the tag,
all bulleted items would use the same bullet character. Instead, you must specify that
you want to apply a rule only to the nested tag. To do this, instead of using a single style
name at the beginning of the rule, specify that the item is nested by listing the parent
style name followed by the descendent (child) style name. For example, to use round bullets
for all bulleted lists that are nested within numbered lists, specify the following:
ol ul {list-style-type: circle}
This technique works with multiple nested levels. For example, to apply this formatting
only to bulleted lists nested within other bulleted lists that are nested within numbered
lists, specify the following:
ol ul ul {list-style-type: circle}
You can do this with any text attributes, not just those pertaining to the bullet or number
type. For example, to make all the bold text that appears in unordered lists appear blue,
specify the following:
ul b {color: blue}
In this exercise, you will apply different bullet characters to a nested list by creating styles
in the area of a document.
SET UP Use the index.htm file in the practice folder for this topic. This file is located
in the Documents\Microsoft Press\HTML5 SBS\06Styles\CreatingNested folder. Open
the index file in Notepad and in Internet Explorer.
1. Examine the index file in Internet Explorer.
Notice that the first-level bullet characters are discs, the second-level bullet characters
are circles, and the third-level bullet characters are squares.