Pro HTML5 and CSS3 Design Patterns

CHAPTER 13 ■ BLOCKS

Section

HTML

<h1>Section</h1>

<section class="introduction”>

<h2>Introduction</h2>

<p>This paragraph is about the introduction.</p>

</section>

<section class="content">

<h2>Content</h2>

<p>This paragraph is about the content.</p>

<section class="section example">

<h3>Subsection Example</h3>

<ul><li>This list item relates to the subsection example.</li>

<li>This list item relates to the subsection example.</li></ul>

</section>

</section>

CSS

section { padding:10px; margin:10px 0; background-color:gold;

border-left:1px solid gray; border-right:2px solid black;

border-top:1px solid gray; border-bottom:2px solid black; display:block; }

section p { margin:0; margin-top:5px; }

section h2 { margin:0; margin-bottom:10px; }

section h3 { margin:0; margin-bottom:10px; }

section.example { background-color:white; }

section section { margin-bottom:0; }