Session 03 - HTML Forms & Tables, Introduction to CSS
Examples

• Example 3.1 - Simple form  
  <form method="post" action="https://cs12.net/form/submit.php" enctype="application/x-www-form-urlencoded"> Email Address:<input type="text" name="email"/><br/><button type="submit"> Submit </button></form>JSFiddle - Example 3.1
• Example 3.2 - Simple for using 'get'  
  <form method="get" action="https://cs12.net/form/submit.php" enctype="application/x-www-form-urlencoded"> Email Address:<input type="text" name="email"/><br/><button type="submit"> Submit </button></form>JSFiddle - Example 3.2
• Example 3.3 - Simple form using 'post'  
  <form method="post" action="https://cs12.net/form/submit.php" enctype="application/x-www-form-urlencoded"> Email Address:<input type="text" name="email"/><br/><button type="submit">Submit</button></form>JSFiddle - Example 3.3
• Example 3.4 - Form: text input  
  <form method="get" action="https://cs12.net/form/submit.php" 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/><button type="submit">Submit Information</button></form>JSFiddle - Example 3.4
• Example 3.5 - Form: radio buttons  
  <form method="get" action="https://cs12.net/form/submit.php" 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/><button type="submit">Submit Information</button></form>JSFiddle - Example 3.5
• Example 3.6 - Form: checkboxes  
  <form method="get" action="https://cs12.net/form/submit.php" 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/><button type="submit">Submit Information</button></form>JSFiddle - Example 3.6
• Example 3.7 - Form: textarea  
• Example 3.8 - Pull-down List  
  <form method="get" action="https://cs12.net/form/submit.php" 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/><button type="submit">Submit Information</button></form>JSFiddle - Example 3.8
• Example 3.9 - Scrollable List  
  <form method="get" action="https://cs12.net/form/submit.php" 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/><button type="submit">Submit Information</button></form>JSFiddle - Example 3.9
• Example 3.10 - Form Labels  
  <form method="get" action="https://cs12.net/form/submit.php" 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/><button type="submit">Submit</button></form>JSFiddle - Example 3.10
• Example 3.11 - Form Labels  
  <form method="get" action="https://cs12.net/form/submit.php" 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>JSFiddle - Example 3.11
• Example 3.12 - Form Labels  
  <form method="get" action="https://cs12.net/form/submit.php" 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/><button type="submit">Submit Information</button></div></form>JSFiddle - Example 3.12
• Example 3.13 - Form fieldset and legend elements  
  <form method="get" action="https://cs12.net/form/submit.php" 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>JSFiddle - Example 3.13
• Example 3.14 - Form: optgroup in pull-down menus  
  <p>Select a school:</p><form method="get" action="https://cs12.net/form/submit.php" 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><button type="submit">Submit</button></div></form>JSFiddle - Example 3.14
• Example 3.15 - Input text placeholder  
  <h4>Placeholder Text</h4><p>Used to give instructions:</p><form action="https://cs12.net/form/submit.php" 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://cs12.net/form/submit.php" method="post" enctype="application/x-www-form-urlencoded"><p><label for="expiration">Expiration:</label><input id="expiration" name="expiration" type="text" placeholder="MMYY"/><br/><button type="submit">Submit</button></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;}JSFiddle - Example 3.15
• Example 3.16 - Input autofocus property  
  <form action="https://cs12.net/form/submit.php" 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><button type="submit">Submit</button></p></form>JSFiddle - Example 3.16
• Example 3.17 - text input for email  
  <form action="https://cs12.net/form/submit.php" 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><button type="submit">Submit</button></p></form>JSFiddle - Example 3.17
• Example 3.18 - text input for URLs  
  <form action="https://cs12.net/form/submit.php" method="post" enctype="application/x-www-form-urlencoded"><fieldset><legend>URL</legend><p>URL: <input type="url" name="url" size="50"/></p></fieldset><p><button type="submit">Submit</button></p></form>JSFiddle - Example 3.18
• Example 3.19 - HTML5 input type='number' and type='range'  
  <form action="https://cs12.net/form/submit.php" 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><button type="submit">Submit</button></p></form>JSFiddle - Example 3.19
• Example 3.20 - HTML5 input types for date and time  
  <form action="https://cs12.net/form/submit.php" 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><button type="submit">Submit</button></p></form>JSFiddle - Example 3.20
• 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>JSFiddle - Example 3.21
• 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>JSFiddle - Example 3.22
• 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>JSFiddle - Example 3.23
• 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>JSFiddle - Example 3.24
• 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>JSFiddle - Example 3.25
• 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>JSFiddle - Example 3.26
• 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; }JSFiddle - Example 3.27
• 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>JSFiddle - Example 3.28
• 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; }JSFiddle - Example 3.29
• 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; } JSFiddle - Example 3.30
• 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; }JSFiddle - Example 3.31
• Example 3.32 - id selectors  
  <header><h1>Lorem Ipsum</h1></header><main><!-- main content --><section id="bigidea">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. </section><section> Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. </section></main><footer> Maecenas condimentum hendrerit turpis. </footer> h1 { text-align: center; } section { margin: 1rem; } footer { margin: 1rem; padding: 1rem; border-top: thin solid black; background-color: #f0f0f0; } #bigidea { background-color: blue; color: white; border-color: green; border-width: thick; border-style: solid; line-height: 1.5; padding: 1rem; } JSFiddle - Example 3.32
• 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;} JSFiddle - Example 3.33
• 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; } JSFiddle - Example 3.34
• 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>JSFiddle - Example 3.35
• 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>JSFiddle - Example 3.36
• 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>JSFiddle - Example 3.37
• Example 3.38 - font-weight  
  <div> font-weight can be used to make <span style="font-weight: bold">text appear bold</span>. </div>JSFiddle - Example 3.38
• 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>JSFiddle - Example 3.39
• 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; }JSFiddle - Example 3.40
• 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>JSFiddle - Example 3.41
• 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>JSFiddle - Example 3.42
• Example 3.43 - Border Styles  
  <h4>Dotted</h4><p class="border1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras feugiat mauris facilisis libero. Etiam nisl. Cras est dolor, viverra ac, ultrices volutpat, vestibulum et, odio. Nulla eget libero. Praesent eget tellus vel nibh nonummy egestas. </p><h4>Dashed</h4><p class="border2"> Etiam eu arcu quis lectus semper sodales. Donec vitae risus. Integer sollicitudin imperdiet dolor. Donec vehicula. Aliquam ut sapien sed eros imperdiet pharetra. Donec accumsan scelerisque leo. Sed eros nunc, pellentesque et, mollis non, faucibus venenatis, tortor.</p><h4>Outset</h4><p class="border3"> Pellentesque a velit. Sed pharetra vestibulum mauris. Ut vel arcu. Cras dolor ligula, eleifend et, ultrices nec, viverra in, ipsum. In convallis pharetra lacus. Etiam tellus. Aliquam quam. Vivamus mattis purus nec quam. Suspendisse hendrerit dui ac massa. </p><h4>Solid</h4><p class="border4"> Etiam rhoncus. Praesent id neque et odio dictum varius. Integer imperdiet blandit orci. Donec nec nunc posuere augue egestas accumsan. Nunc nonummy metus ut nunc. In id turpis vitae nisl eleifend bibendum. Curabitur cursus aliquam dolor. </p><h4>Double</h4><p class="border5"> Duis id erat a tortor laoreet aliquet. Quisque consectetuer lobortis mauris. Donec pede. Cras non turpis vel tortor iaculis nonummy. Ut facilisis viverra sem. Morbi pretium iaculis ligula. Praesent lectus. Aenean vel ante. Nunc interdum semper nisl. Pellentesque tincidunt. </p><h4>Groove</h4><p class="border6"> Aliquam leo nunc, congue a, imperdiet eget, aliquet ac, tortor. Sed ac est. Vivamus nisi. Mauris in nisl. Sed ultricies nunc vel nunc. In dignissim consequat arcu. Sed in risus. Nulla facilisi. Integer purus urna, laoreet vitae, congue a, posuere ut, ipsum. Nunc ac lacus sit amet nisi porttitor aliquam. </p><h4>Ridge</h4><p class="border7"> Vivamus dictum, sem in vulputate vestibulum, est tellus tempus dolor, ut laoreet arcu metus eu orci. Sed enim augue, dignissim sed, porta sed, dapibus ac, nibh. Nunc mattis ipsum eu lectus. Nam pharetra mattis massa. </p><h4>Inset</h4><p class="border8"> Maecenas consectetuer, lectus ac tempus iaculis, leo ipsum tincidunt erat, et aliquam libero nulla ac ipsum. Nam turpis leo, feugiat vel, nonummy id, ornare a, arcu. Vestibulum porta, justo et ornare porta, neque eros vestibulum libero, semper iaculis augue turpis eu neque. </p>body { font-family: tahoma,arial,sans-serif; font-size: small; } p { margin: 1em; padding: 1em; width: 50%; } .border1 { border: thin dotted #900; } .border2 { border: medium dashed #090; } .border3 { border: thick outset #009; } .border4 { border: 3px solid #999; } .border5 { border: 5px double #000; } .border6 { border: 10px groove black; } .border7 { border: 15px ridge black; } .border8 { border: 20px inset #900; }JSFiddle - Example 3.43
• Example 3.44 - Margin, Padding, Border  
  <aside> Drafted by Thomas Jefferson between June 11 and June 28, 1776, the Declaration of Independence is at once the nation's most cherished symbol of liberty and Jefferson's most enduring monument.</aside><p> We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty, and the pursuit of Happiness. That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed. That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness. </p>aside { text-align: left; font-size: 1.1rem; color: #003300; background-color: rgb(250,250,200); padding: 1rem; margin: 0.5rem; border-width: 2px; border-style: dashed; border-color: #990000; } p { font-size: large; line-height: 1.5; }JSFiddle - Example 3.44
• Example 3.45 - Form  
  <form method="post" action="https://cs12.net/form/submit.php" enctype="application/x-www-form-urlencoded"><label>Name: <input type="text" name="name"/></label><label>Email Address: <input type="email" name="email"/></label><button type="submit"> Submit </button></form> label { display: block; margin-top: 1rem;} input { display: block;} button { display: block; margin-top: 1rem;} JSFiddle - Example 3.45
• Example 3.46 - 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; } JSFiddle - Example 3.46