Pro HTML5 and CSS3 Design Patterns

CHAPTER 2 HTML DESIGN PATTERNS

Class and ID Attributes

HTML

<h1>Class and ID Attributes</h1>

<div id="hcalendar1" class="vevent">

<h3 class="summary">Calendar Event Summary</h3>

<p class="description">Calendar Event Description</p>

<p>From

<span class="dtstart" title="2007-05-01T08:30:00-05:00"

>01 May 2007 from 8:30am EST</span> to

<span class="dtend" title="2007-05-01T09:30:00-05:00"

>9:30am EST</span></p>

<p>Location: <span class="location">Meeting Location</span></p>

<p>Booked by: <span class="uid">globally-unique-id.host.com</span>

on <span class="dtstamp" title="20070101T231000Z"

>Jan 1, 2007 at 6:00pm</span></p>

</div>

<p>See <a href="http://microformats.org/wiki/hcalendar">microformats.org</a>

for more information about microformats.</p>

CSS

*.vevent p { margin:0 0 5px 0; font-size:0.9em; }

*.vevent h3 { margin:0 0 5px 0; }

*.vevent *.location { font-style:italic; }

*.vevent *.uid { font-family:monospace; }

*.vevent *.dtstart,

*.vevent *.dtend,

*.vevent *.dtstamp { color:green; }

#hcalendar1 { margin:5px; border:1px solid black; padding:10px; }