Session 03 - HTML, Introduction to CSS
Examples

• Example 3.1 - Simple form  
  <form method="post" action="https://cscie12.dce.harvard.edu/echo" enctype="application/x-www-form-urlencoded"> Email Address:<input type="text" name="email"/><br/><input type="submit"/></form>
• Example 3.2 - Simple for using 'get'  
  <form method="get" action="https://cscie12.dce.harvard.edu/echo" enctype="application/x-www-form-urlencoded"> Email Address:<input type="text" name="email"/><br/><input type="submit"/></form>
• Example 3.3 - Simple form using 'post'  
  <form method="post" action="https://cscie12.dce.harvard.edu/echo" enctype="application/x-www-form-urlencoded"> Email Address:<input type="text" name="email"/><br/><input type="submit"/></form>
• Example 3.4 - Form: text input  
  <form method="get" action="https://cscie12.dce.harvard.edu/echo" enctype="application/x-www-form-urlencoded"> Email Address:<input type="text" name="email" size="50"/><br/> Year of Birth:<input type="text" name="year_of_birth" maxlength="4"/><br/><input type="submit" name="action" value="Proceed"/></form>
• Example 3.5 - Form: radio buttons  
  <form method="get" action="https://cscie12.dce.harvard.edu/echo" enctype="application/x-www-form-urlencoded"> Email Address:<input type="text" name="email" size="50"/><br/> Please send me email updates:<br/><input type="radio" name="sendupdates" value="yes" checked="checked"/>yes<br/><input type="radio" name="sendupdates" value="no"/>no<br/><input type="submit" name="action" value="Proceed"/></form>
• Example 3.6 - Form: checkboxes  
  <form method="get" action="https://cscie12.dce.harvard.edu/echo" enctype="application/x-www-form-urlencoded"> What ice cream do you like?<br/><input type="checkbox" name="icecream" value="chocolate"/>Chocolate<br/><input type="checkbox" name="icecream" value="chocolate peanut butter"/>Chocolate Peanut Butter<br/><input type="checkbox" name="icecream" value="vanilla"/>Vanilla<br/><input type="checkbox" name="icecream" value="strawberry"/>Strawberry<br/><input type="submit" name="action" value="Proceed"/></form>
• Example 3.7 - Form: textarea  
• Example 3.8 - Pull-down List  
  <form method="get" action="https://cscie12.dce.harvard.edu/echo" enctype="application/x-www-form-urlencoded"> Select your favorite New England states:<br/><select name="state"><option value="CT">Connecticut</option><option value="ME">Maine</option><option value="MA">Massachusetts</option><option value="NH">New Hampshire</option><option value="RI">Rhode Island</option><option value="VT">Vermont</option></select><br/><input type="submit" name="action" value="Proceed"/></form>
• Example 3.9 - Scrollable List  
  <form method="get" action="https://cscie12.dce.harvard.edu/echo" enctype="application/x-www-form-urlencoded"> Select your favorite New England states:<br/><select name="state" size="3" multiple="multiple"><option value="CT">Connecticut</option><option value="ME">Maine</option><option value="MA">Massachusetts</option><option value="NH">New Hampshire</option><option value="RI">Rhode Island</option><option value="VT">Vermont</option></select><br/><input type="submit" name="action" value="Proceed"/></form>
• Example 3.10 - Form Labels  
  <form method="get" action="https://cscie12.dce.harvard.edu/echo" enctype="application/x-www-form-urlencoded"><p>Do you like to watch NCAA basketball?</p><label><input type="radio" name="basketball" value="Y"/> Yes</label><br/><label><input type="radio" name="basketball" value="N"/> No</label><br/><input type="submit"/></form>
• Example 3.11 - Form Labels  
  <form method="get" action="https://cscie12.dce.harvard.edu/echo" enctype="application/x-www-form-urlencoded"><p>Do you like to watch NCAA basketball?</p><input type="radio" name="basketball" id="basketball_y" value="Y"/><label for="basketball_y">Yes</label><br/><input type="radio" name="basketball" id="basketball_n" value="N"/><label for="basketball_n">No</label><br/><input type="submit" value="Submit"/></form>
• Example 3.12 - Form Labels  
  <form method="get" action="https://cscie12.dce.harvard.edu/echo" enctype="application/x-www-form-urlencoded"><div> What ice cream do you like? <br/><input type="checkbox" name="icecream" id="icecream_chocolate" value="chocolate"/><label for="icecream_chocolate">Chocolate</label><br/><input type="checkbox" name="icecream" id="icecream_cpb" value="chocolate peanut butter"/><label for="icecream_cpb">Chocolate Peanut Butter</label><br/><input type="checkbox" name="icecream" id="icecream_vanilla" value="vanilla"/><label for="icecream_vanilla">Vanilla</label><br/><input type="checkbox" name="icecream" id="icecream_strawberry" value="strawberry"/><label for="icecream_strawberry">Strawberry</label><br/><input type="submit" name="action" value="Proceed"/></div></form>
• Example 3.13 - Form fieldset and legend elements  
  <form method="get" action="https://cscie12.dce.harvard.edu/echo" enctype="application/x-www-form-urlencoded"><div><fieldset><legend>Name</legend><label for="fname">First Name </label><input type="text" name="fname" id="fname" size="30"/><br/><label for="lname">Last Name </label><input type="text" name="lname" id="lname" size="30"/><br/></fieldset><fieldset><legend>Sports</legend><fieldset><legend>Do you like basketball?</legend><input type="radio" name="basketball" id="basketball_yes" value="Y"/><label for="basketball_yes">Yes</label><br/><input type="radio" name="basketball" id="basketball_no" value="N"/><label for="basketball_no">No</label></fieldset><fieldset><legend>Do you like baseball?</legend><input type="radio" name="baseball" id="baseball_yes" value="Y"/><label for="baseball_yes">Yes</label><br/><input type="radio" name="baseball" id="baseball_no" value="N"/><label for="baseball_no">No</label></fieldset></fieldset><input type="submit" value="Submit"/></div></form>
• Example 3.14 - Form: optgroup in pull-down menus  
  <p>Select a school:</p><form method="get" action="https://cscie12.dce.harvard.edu/echo" enctype="application/x-www-form-urlencoded"><select name="school"><optgroup label="ACC"><option>Boston College</option><option>Clemson</option><option>Duke</option><option>Florida State</option><option>Georgia Tech</option><option>Louiville</option><option>Miami</option><option>North Carolina</option><option>North Carolina State</option><option>Notre Dame</option><option>Pitt</option><option>Syracuse</option><option>Virginia</option><option>Virginia Tech</option><option>Wake Forest</option></optgroup><optgroup label="Big 10"><option>Illinois</option><option>Indiana</option><option>Iowa</option><option>Maryland</option><option>Michigan</option><option>Michigan State</option><option>Minnesota</option><option>Nebraska</option><option>Northwestern</option><option>Ohio State</option><option>Penn State</option><option>Purdue</option><option>Rutgers</option><option>Wisconsin</option></optgroup><optgroup label="Big XII"><option>Baylor</option><option>Iowa State</option><option>Kansas</option><option>Kansas State</option><option>Oklahoma</option><option>Oklahoma State</option><option>Texas</option><option>Texas Christian</option><option>Texas Tech</option><option>West Virginia</option></optgroup><optgroup label="Ivy League"><option>Brown</option><option>Columbia</option><option>Cornell</option><option>Dartmouth</option><option>Harvard</option><option>Penn </option><option>Princeton</option><option>Yale</option></optgroup><optgroup label="Pac 12"><option>Arizona</option><option>Arizona State</option><option>California</option><option>Colorado</option><option>Oregon</option><option>Oregon State</option><option>Stanford</option><option>UCLA</option><option>USC</option><option>Utah</option><option>Washington</option><option>Washington State</option></optgroup></select><div><input type="submit"/></div></form>
• Example 3.15 - Input text placeholder  
  <h4>Placeholder Text</h4><p>Used to give instructions:</p><form action="https://cscie12.dce.harvard.edu/echo" method="post" enctype="application/x-www-form-urlencoded"><input size="30" name="search" type="text" placeholder="What can we help you find?"/><input class="searchSubmit" value="Search" type="submit"/></form><hr/><p>Used to show format:</p><form action="https://cscie12.dce.harvard.edu/echo" method="post" enctype="application/x-www-form-urlencoded"><p><label for="expiration">Expiration:</label><input id="expiration" name="expiration" type="text" placeholder="MMYY"/><br/><input type="submit"/></p></form>input.searchSubmit { background: url('http://cscie12.dce.harvard.edu/resources/./images/magnifier12.png') no-repeat; width: 16px; height: 16px; border: none; margin-left: 2px; text-indent: -9999em;}
• Example 3.16 - Input autofocus property  
  <form action="https://cscie12.dce.harvard.edu/echo" method="post" enctype="application/x-www-form-urlencoded"><fieldset><legend>Autofocus</legend><p>The following field should "autofocus":</p><p> Name: <input size="50" name="name" type="text" autofocus="autofocus"/></p></fieldset><p><input type="submit"/></p></form>
• Example 3.17 - text input for email  
  <form action="https://cscie12.dce.harvard.edu/echo" method="post" enctype="application/x-www-form-urlencoded"><fieldset><legend>Email</legend><p>Email: <input type="email" name="email_address" size="50"/></p></fieldset><p><input type="submit"/></p></form>
• Example 3.18 - text input for URLs  
  <form action="https://cscie12.dce.harvard.edu/echo" method="post" enctype="application/x-www-form-urlencoded"><fieldset><legend>URL</legend><p>URL: <input type="url" name="url" size="50"/></p></fieldset><p><input type="submit"/></p></form>
• Example 3.19 - HTML5 input type='number' and type='range'  
  <form action="https://cscie12.dce.harvard.edu/echo" method="post" enctype="application/x-www-form-urlencoded"><p>Number:<br/><input type="number" name="n"/></p><p>Range from 1 to 10, increments of 1:<br/><input type="range" min="1" max="10" step="1" name="r"/></p><p><input type="submit"/></p></form>
• Example 3.20 - HTML5 input types for date and time  
  <form action="https://cscie12.dce.harvard.edu/echo" method="post" enctype="application/x-www-form-urlencoded"><fieldset><legend>Date and Time</legend><p>Date</p><p><input type="date" name="my_date"/></p><p>Datetime-local</p><p><input type="datetime-local" name="my_datetime"/></p><p>Time</p><p> 15 minute steps: <input type="time" name="my_time_15" step="900" value="12:00"/></p><p> 1 minute steps: <input type="time" name="my_time_1" step="60" value="12:00"/></p><p> 1 second steps: <input type="time" name="my_time_1s" step="1" value="12:00"/></p></fieldset><p><input type="submit"/></p></form>
• Example 3.21 - Table  
  <table><caption>A table</caption><tr><th rowspan="1" colspan="1"> Column 1 </th><th rowspan="1" colspan="1"> Column 2 </th><th rowspan="1" colspan="1"> Column 3 </th></tr><tr><td rowspan="1" colspan="1">row 1 column 1</td><td rowspan="1" colspan="1">row 1 column 2</td><td rowspan="1" colspan="1">row 1 column 3</td></tr><tr><td rowspan="1" colspan="1">row 2 column 1</td><td rowspan="1" colspan="1">row 2 column 2</td><td rowspan="1" colspan="1">row 2 column 3</td></tr><tr><td rowspan="1" colspan="1">row 3 column 1</td><td rowspan="1" colspan="1">row 3 column 2</td><td rowspan="1" colspan="1">row 3 column 3</td></tr></table>
• Example 3.22 - Simple data table  
  <p>United States Urban and Rural Populations</p><table><tr><td rowspan="1" colspan="1">Year</td><td rowspan="1" colspan="1">Percent Urban</td><td rowspan="1" colspan="1">Percent Rural</td></tr><tr><th rowspan="1" colspan="1">2010</th><td rowspan="1" colspan="1">80.3</td><td rowspan="1" colspan="1">19.7</td></tr><tr><th rowspan="1" colspan="1">2000</th><td rowspan="1" colspan="1">79.2</td><td rowspan="1" colspan="1">20.8</td></tr><tr><th rowspan="1" colspan="1">1950</th><td rowspan="1" colspan="1">64.0</td><td rowspan="1" colspan="1">36.0</td></tr><tr><th rowspan="1" colspan="1">1900</th><td rowspan="1" colspan="1">39.6</td><td rowspan="1" colspan="1">60.4</td></tr><tr><th rowspan="1" colspan="1">1850</th><td rowspan="1" colspan="1">15.4</td><td rowspan="1" colspan="1">84.6</td></tr><tr><th rowspan="1" colspan="1">1800</th><td rowspan="1" colspan="1">6.1</td><td rowspan="1" colspan="1">93.9</td></tr></table><p> Data from <a href="http://www.census.gov/">United States Census Bureau</a></p>
• Example 3.23 - Advanced Table  
  <table summary="This table shows the percentage of the United States population that lived in urban and rural areas from 1800 to 2000."><caption>United States Urban and Rural Populations</caption><thead><tr><th rowspan="1" colspan="1">Year</th><th rowspan="1" colspan="1">Percent Urban</th><th rowspan="1" colspan="1">Percent Rural</th></tr></thead><tfoot><tr><td colspan="3" rowspan="1">Data from <a href="http://www.census.gov/">United States Census Bureau</a></td></tr></tfoot><tbody><tr><th rowspan="1" colspan="1">2010</th><td rowspan="1" colspan="1">80.3</td><td rowspan="1" colspan="1">19.7</td></tr><tr><th rowspan="1" colspan="1">2000</th><td rowspan="1" colspan="1">79.2</td><td rowspan="1" colspan="1">20.8</td></tr><tr><th rowspan="1" colspan="1">1950</th><td rowspan="1" colspan="1">64.0</td><td rowspan="1" colspan="1">36.0</td></tr><tr><th rowspan="1" colspan="1">1900</th><td rowspan="1" colspan="1">39.6</td><td rowspan="1" colspan="1">60.4</td></tr><tr><th rowspan="1" colspan="1">1850</th><td rowspan="1" colspan="1">15.4</td><td rowspan="1" colspan="1">84.6</td></tr><tr><th rowspan="1" colspan="1">1800</th><td rowspan="1" colspan="1">6.1</td><td rowspan="1" colspan="1">93.9</td></tr></tbody></table>
• Example 3.24 - 'colgroup' element  
  <table><caption>United States Urban and Rural Populations</caption><colgroup span="1"><col span="1" style="background-color: lightsalmon;"/><col span="2" style="background-color: wheat;"/></colgroup><thead><tr><th scope="col" rowspan="1" colspan="1">Year</th><th scope="col" rowspan="1" colspan="1">Percent Urban</th><th scope="col" rowspan="1" colspan="1">Percent Rural</th></tr></thead><tbody><tr><th scope="row" rowspan="1" colspan="1">2010</th><td rowspan="1" colspan="1">80.3</td><td rowspan="1" colspan="1">19.7</td></tr><tr><th scope="row" rowspan="1" colspan="1">2000</th><td rowspan="1" colspan="1">79.2</td><td rowspan="1" colspan="1">20.8</td></tr><tr><th scope="row" rowspan="1" colspan="1">1950</th><td rowspan="1" colspan="1">64.0</td><td rowspan="1" colspan="1">36.0</td></tr><tr><th scope="row" rowspan="1" colspan="1">1900</th><td rowspan="1" colspan="1">39.6</td><td rowspan="1" colspan="1">60.4</td></tr><tr><th scope="row" rowspan="1" colspan="1">1850</th><td rowspan="1" colspan="1">15.4</td><td rowspan="1" colspan="1">84.6</td></tr><tr><th scope="row" rowspan="1" colspan="1">1800</th><td rowspan="1" colspan="1">6.1</td><td rowspan="1" colspan="1">93.9</td></tr></tbody></table>
• Example 3.25 - Table with 'scope' attribute  
  <table><caption>United States Urban and Rural Populations</caption><thead><tr><th scope="col" rowspan="1" colspan="1">Year</th><th scope="col" rowspan="1" colspan="1">Percent Urban</th><th scope="col" rowspan="1" colspan="1">Percent Rural</th></tr></thead><tfoot><tr><td colspan="3" rowspan="1">Data from <a href="http://www.census.gov/">United States Census Bureau</a></td></tr></tfoot><tbody><tr><th scope="row" rowspan="1" colspan="1">2010</th><td rowspan="1" colspan="1">80.3</td><td rowspan="1" colspan="1">19.7</td></tr><tr><th scope="row" rowspan="1" colspan="1">2000</th><td rowspan="1" colspan="1">79.2</td><td rowspan="1" colspan="1">20.8</td></tr><tr><th scope="row" rowspan="1" colspan="1">1950</th><td rowspan="1" colspan="1">64.0</td><td rowspan="1" colspan="1">36.0</td></tr><tr><th scope="row" rowspan="1" colspan="1">1900</th><td rowspan="1" colspan="1">39.6</td><td rowspan="1" colspan="1">60.4</td></tr><tr><th scope="row" rowspan="1" colspan="1">1850</th><td rowspan="1" colspan="1">15.4</td><td rowspan="1" colspan="1">84.6</td></tr><tr><th scope="row" rowspan="1" colspan="1">1800</th><td rowspan="1" colspan="1">6.1</td><td rowspan="1" colspan="1">93.9</td></tr></tbody></table>
• Example 3.26 - Table with 'headers' attribute  
  <table><caption>United States Urban and Rural Populations</caption><thead><tr><th id="year" rowspan="1" colspan="1">Year</th><th id="urban" rowspan="1" colspan="1">Percent Urban</th><th id="rural" rowspan="1" colspan="1">Percent Rural</th></tr></thead><tfoot><tr><td colspan="3" rowspan="1">Data from <a href="http://www.census.gov/">United States Census Bureau</a></td></tr></tfoot><tbody><tr><th id="y2010" headers="year" rowspan="1" colspan="1">2010</th><td headers="y2010 urban" rowspan="1" colspan="1">80.3</td><td headers="y2010 rural" rowspan="1" colspan="1">19.7</td></tr><tr><th id="y2000" headers="year" rowspan="1" colspan="1">2000</th><td headers="y2000 urban" rowspan="1" colspan="1">79.2</td><td headers="y2000 rural" rowspan="1" colspan="1">20.8</td></tr><tr><th id="y1950" headers="year" rowspan="1" colspan="1">1950</th><td headers="y1950 urban" rowspan="1" colspan="1">64.0</td><td headers="y1950 ruran" rowspan="1" colspan="1">36.0</td></tr><tr><th id="y1900" headers="year" rowspan="1" colspan="1">1900</th><td headers="y1900 urban" rowspan="1" colspan="1">39.6</td><td headers="y1900 rural" rowspan="1" colspan="1">60.4</td></tr><tr><th id="y1850" headers="year" rowspan="1" colspan="1">1850</th><td headers="y1850 urban" rowspan="1" colspan="1">15.4</td><td headers="y1850 rural" rowspan="1" colspan="1">84.6</td></tr><tr><th id="y1800" headers="year" rowspan="1" colspan="1">1800</th><td headers="y1800 urban" rowspan="1" colspan="1">6.1</td><td headers="y1800 rural" rowspan="1" colspan="1">93.9</td></tr></tbody></table>
• Example 3.27 - Simple CSS Example  
  <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </p>p { color: red; background-color: blue; }
• Example 3.28 - style attribute  
  <p style="color: black; background-color: teal; padding: 1em; font-family: helvetica, sans-serif; text-align: justify; margin: 2em;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </p>
• Example 3.29 - style element  
  <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </p>p { color: black; background-color: teal; padding: 1em; font-family: helvetica, sans-serif; text-align: justify; margin: 2em; }
• Example 3.30 - link element for stylesheets  
  <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </p>p { color: black; background-color: teal; padding: 1em; font-family: helvetica, sans-serif; text-align: justify; margin: 2em; }
• Example 3.31 - classes  
  <div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.</div><div class="withstyle">Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis.</div><div class="warn">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.</div><div>Lorem ipsum dolor sit amet, <span class="warn">consectetuer adipiscing elit</span>. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.</div><div id="legalese">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.</div>div { background-color: white; color: black; font-family: times; margin: 0.5em; padding: 0.5em; } div.withstyle { background-color: olive; color: navy; font-family: sans-serif; margin: 0.5em; padding: 0.5em; } .warn { background-color: yellow; color: red; font-weight: bold; } #legalese { color: #cccccc; font-size: 0.6em; }
• Example 3.32 - id selectors  
  <div id="header"> put in header information here </div><div id="main"><!-- main content --> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </div><div id="footer"> put in footer information here </div> #main { background-color: blue; color: white; border-color: green; border-width: thick; border-style: solid; }
• Example 3.33 - contextual selectors  
  <div><em>Emphasized text</em> outside of <strong>li</strong> appear "normal". <ul><li><em>Emphasized text</em> within <strong>li</strong> have a different style. </li></ul></div>li em { color: red; background-color: navy;}
• Example 3.34 - Styles and inheritance  
  <div> Lorem ipsum dolor sit amet, <em>consectetuer adipiscing elit</em>. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. <ul><li>Lorem</li><li>Ipsum</li><li>Dolor</li></ul></div><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis.</p><ul><li>Lorem</li><li>Ipsum</li><li>Dolor</li></ul>body { color: navy; } em { color: red; } div { color: green; }
• Example 3.35 - font properties  
  <div style="font-family: garamond, times, serif;">Garamond, Times, or serif (generic family)</div><div style="font-family: calibri, arial, helvetica, sans-serif;">Calibri, Arial, Helvetica or sans-serif (generic family)</div><div style="font-family: lucida console, courier, monospace;">Lucida Console, Courier or monospace (generic family)</div><div style="font-family: fantasy;">Fantasy (generic family)</div><div style="font-family: cursive;">Cursive (generic family)</div>
• Example 3.36 - font-style  
  <div style="font-style: normal;">Normal font-style</div><div style="font-style: italic;">Italic font-style</div><div style="font-style: oblique;">Oblique font-style</div>
• Example 3.37 - font-weight and font-variant  
  <div style="font-variant: small-caps;">This should be rendered in small-caps. <div style="font-variant: normal;">Here we revert to "normal". </div></div>
• Example 3.38 - font-weight  
  <div> font-weight can be used to make <span style="font-weight: bold">text appear bold</span>. </div>
• Example 3.39 - font-size  
  <div style="font-size: 8pt;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.</div><div style="font-size: 120%;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.</div><div style="font-size: 1.5em;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.</div>
• Example 3.40 - font shorthand  
  <div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </div>body { font: normal normal normal x-large/200% arial, helvetica, sans-serif; }
• Example 3.41 - text properties  
  <div style="margin-left: 30%; margin-right: 30%;"><p style="text-align: left">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </p><p style="text-align: center">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </p><p style="text-align: right">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </p><p style="text-align: justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </p></div>
• Example 3.42  
  <div style="background-color: rgb(100%,66%,33%); padding: 1em; ; margin: 1em;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br/>rgb(100%,66%,33%) </div><div style="background-color: #ffa854; padding: 1em; margin: 1em; "> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br/>#ffa854 </div><div style="background-color: rgb(255,168,84); padding: 1em; ; margin: 1em;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br/>rgb(255,168,84) </div>
• Example 3.43 - Test Drive Your Browser  
  <h1>Lorem Ipsum Dolor</h1><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </p><ul><li>Lorem</li><li>Ipsum</li><li>Dolor</li></ul>body { background-color: silver; font-family: calibri, arial, helvetica, sans-serif; } p { line-height: 200%; border: thin solid black; padding: 1em; margin: 2em; background-color: teal; } ul { border: medium dotted red; background-color: yellow; font-family: Times New Roman, Times, serif; } h1 { color: purple; background-color: white; font-variant: small-caps; }