Previous Page
Next Page

Embedding Styles in Styles

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.

[View full size image]


To embed a style rule within another style rule:

  • .directions .character {
  font-size: 1.4em;
}

    This rule applies to only those places where there's a character class inside a directions class.

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



Previous Page
Next Page