CSS Two Step

Let us look at an example of using Descendent selectors to clean up some typical 'tag soup'.

Original Tag Soup Html

<p><font color='red'>The next text is 
<font size='14pt' color='blue'><a href='#'>bigger</a>
</font></font></p>

Step 1. Separate Content from Presention and use classes to apply style to link

xhtml
<p>The next text is <a class='big' href='#'>bigger</a></p>

css
p {color:red;}
.big {fontsize:14pt;color:blue} /* style link using class */

Step 2. Replace Classes with Descender selectors
Result Cleaner xhtml

<p>The next text is <a href='#'>bigger</a></p>

p {color:red;}
p a {font-size:14pt;color:blue} /* using descendent selector */