| If you like, you can change elements on the page even more precisely than we've shown previously. You can do this by making rules that apply to a class only when it is inside another class. Script 11.7 shows you how, and Figure 11.7 shows the result, which makes the character name within a stage direction larger. Script 11.7. Embedding style rules within another style. | body { background-color: white; color: black; font-family: "Trebuchet MS", verdana, helvetica, arial, sans-serif; font-size: 0.9em; } img { margin-right: 10px; } .character { font-weight: bold; text-transform: uppercase; } div.character { margin: 1.5em 0em 1em 17em; } .directions { font-style: italic; } .dialog, .directions { margin-left: 22em; } .directions .character { font-size: 1.4em; } #week2 { background-color: #FFFF00; } a { text-decoration: none; padding: 5px 10px 5px 10px; } a:link { color: #0000FF; } a:visited { color: #000000; } a:hover { color: #FFFFFF; background-color: #000000; text-decoration: underline; } a:active { color: #FF0000; } | Figure 11.7. By embedding styles rules, you can get extremely specific about your changes, as with the character name shown here. To embed a style rule within another style rule: Tip -
When you are embedding styles this way, you need to be careful to keep these two straight: .directions .character .directions, .character The first selector sets elements with a class of character only when they're inside the class of directions , while the second (with the comma separating the two elements) sets all elements with a class of character or a class of directions (or both). |