We've already established how useful style information is to designing HTML pages, and we've talked about a multiplicity of different ways to add style information to a page. We're now going to cover two additional and very useful features of specifying style information.
Tags enclosed in other tags inherit the settings of the outer tags. You might have seen this phenomenon if you've experimented much with style sheets, although you might not have recognized it as such.
For example, suppose we've defined the <H1> style like this:
H1 {font-size:48; font-family:Arial}
In the course of writing the HTML for the page that uses this style we use an <EM> tag inside a <H1> block:
<H1>Here's my <EM>important</EM> heading</H1>
We wouldn't be very happy if the word important reverted to some other style, such as the body text style. However, because embedded tags inherit the style properties of the tags enclosing them, the text inside the <EM> tag is rendered as bold in 48 point Arial – because it's enclosed in an <H1> tag.
It is important to know that the <EM> tag will only inherit the properties of the <H1> tag if it hasn't already had its own style defined. If you think about this approach you'll see that it makes a lot of sense. In effect, the style sheet engine standardizes everything that you do not specifically define. This works well in practice – as you'll see when you start writing HTML pages that use style sheets heavily.
But this isn't all there is to inheritance! Style sheets even give us the ability to specify that certain instances of certain tags should look a specific way. If we've set all <H1> tags to the color green and all <EM> tags to yellow, we can use what is known as a contextual selector (because the selector depends on the context it's used in) to stipulate additional behavior for a given tag.
With the two declarations above, an <EM> tag inside of a <H1> tag would be rendered as yellow. However, with the following simple declaration we can require that all <EM> tags inside <H1> tags be colored purple instead:
H1 EM {color:purple}
This declaration only affects <EM> tags inside <H1> - it leaves every other combination alone.
Another interesting kind of syntax we're going to cover here is known as a style sheet class. This technique allows us to assign names to modifications of basic styles and then use them in much the same way we would use a normal style.
Suppose we usually would like our first level headings to be displayed in black 24 point Arial type. From our previous discussions we know that we can accomplish this with the style sheet declaration of:
H1 {font-family:Arial; font-size:24pt; color:black}
Now further suppose that occasionally we'd like the <H1> tag to take on a slightly different appearance – maybe we want it to be a larger point size, but in all other respects we'd like it to remain the same. Using a class in our style sheet declarations, we can accomplish this easily:
H1.second {font-size:48pt}:Now we can use both the original declaration and the subclass in our HTML:
<H1>First heading</H1>
<H1 CLASS="second">First large point heading</H1>
Another way to accomplish this task would be to use an in-line <STYLE> tag for each heading that we wanted to appear red:
<H1 STYLE="font-size:48pt">Another large point heading</H1>
As we'll see shortly when we talk about how properties take precedence over each other, the large point size specified in the heading tag itself will override the other font-size specified in the top-level set of styles.