<h2>Professional Layouts With CSS</h2>
<img class="alignright" title="CSS is dreamy!" src="/images/teaching/css_is_dreamy.jpg" alt="CSS is dreamy!" width="150" height="282" />By the time we convene in this section, we have covered the following about CSS:
<ul>
	<li>CSS Rules</li>
	<li>CSS Inheritance</li>
	<li>The Cascade</li>
	<li>The DOM</li>
	<li>The Box Model</li>
	<li>The Flow</li>
</ul>
It's now time to take everything we have learned about CSS and use these techniques to construct a professional-looking web site. But rather than create an entire page from scratch, we disassemble a professional template, then build it back up in 10 simple steps. This exercise demonstrates many of the pitfalls one encounters while designing and implementing CSS, and even introduces the concept of the infamous "hack" to force quirky browsers and rules to do what we want them to do.
<h2 title="Section 03 Slides">Resources</h2>
<ul>
	<li title="CSS Layout and Formatting"><a title="Section 06 Slides" href="http://www.biggles2k.com/teaching/section_06_slides.pdf">Section 06 Slides</a> (PDF, 4.9 MB)</li>
	<li title="CSS Layout and Formatting"><a title="Free CSS Templates" href="http://www.freecsstemplates.org/">Free CSS Templates</a></li>
	<li title="CSS Layout and Formatting"><a title="Free Web Templates" href="http://www.freecsstemplate.net/free-css-templates.php">Free Web Templates</a></li>
	<li title="CSS Layout and Formatting"><a title="More freebies" href="http://www.free-css.com/free-css-templates/page1.php">More freebies</a></li>
	<li title="CSS Layout and Formatting"><a title="Color Scheme Designer" href="http://colorschemedesigner.com/">Color Scheme Designer</a></li>
</ul>
<a title="Return to teaching home" href="../../teaching-home/">Return to teaching home</a>