As I’ve mentioned before, CSS is powerful because of the way in which it uses the structure of HTML documents to determine which styles should be applied in what ways. That’s really only a part of the story, though, since it implies that the only way CSS uses document structure is to determine which rules apply to which elements.
The truth is that structure plays a much bigger role in the way styles are applied to a document. In order to understand this role, we need to understand how documents are structured. Take the “tree” view in Figure 2-18 of the simple HTML document listed here:
<HTML> <HEAD> <BASE HREF="http://www.meerkat.web/"> <TITLE>Meerkat Central</TITLE> </HEAD> <BODY> <H1>Meerkat <EM>Central</EM></H1> <P> Welcome to Meerkat <EM>Central</EM>, the <STRONG>best meerkat web site on <A HREF="inet.html">the <EM>entire</EM> Internet</A></STRONG>!</P> <UL> <LI>We offer: <UL> <LI><STRONG>Detailed information</STRONG> on how to adopt a meerkat</LI> <LI>Tips for living with a meerkat</LI> <LI><EM>Fun</EM> things to do with a meerkat, including: <UL> <LI>Playing fetch</LI> <LI>Digging for food</LI> <LI>Hide and seek</LI> </UL> </LI> </UL> <LI>...and so much more!</LI> </UL> <P> Questions? <A HREF="mail to:firstname.lastname@example.org">Contact us!</A> </P> </BODY> </HTML>
Much of the power of CSS is based on the
relationship of elements. HTML documents, and indeed most structured documents of any kind, are based on a hierarchy of elements, which is visible in the ...