Nesting


By nesting tags together, some very strange effects can be done.
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
  B I { color:red }
-->
</STYLE>
</HEAD>
<BODY>
Here is some <B>bold text</B>.
Here is some <I>italic text</I>.
Here <B>is <I>a mixture of</I> both</B>.
</BODY>
</HTML>
See this example.

Notice how that only when both bold and italics are used at the same time, that the text becomes red.

Another trick is to define multiple tags for the same style:

<HTML>
<HEAD>
<STYLE type="text/css">
<!--
  H1, B I, P { color:red }
  H1 { font-style:italic }
-->
</STYLE>
</HEAD>
<BODY>
Here is some <B>bold text</B>.
Here is some <I>italic text</I>.
Here <B>is <I>a mixture of</I> both</B>.
<H1> This text is RED</H1>
<P> And so is this text. </P>
</BODY>
</HTML>
See this example

Multiple tags are defined with commas as you can see. Also notice how the H1 tag has two definitions. These combine together to produce red italic text.


Previous Section
Spanning
Table of Contents Next Section
Pseudoclasses