Session 03 - HTML Forms & Tables, Introduction to CSS

While exploring forms, it is useful to use a simple server-side script that simply echo back the name/value information your form submitted (https://cs12.net/form/submit.php).

 <form method="post" action="https://cs12.net/form/submit.php">Email Address:
   <input type="text" name="email"/>

   <br/>

   <button type="submit">Submit   </button>
 </form>

 <form method="get" action="https://cs12.net/form/submit.php">Email Address:
   <input type="text" name="email"/>

   <br/>

   <button type="submit">Submit   </button>
 </form>

 <form method="post" action="https://cs12.net/form/submit.php">Email Address:
   <input type="text" name="email"/>

   <br/>

   <button type="submit">Submit   </button>
 </form>

 <form method="get" action="https://cs12.net/form/submit.php">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>

 <form method="get" action="https://cs12.net/form/submit.php">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>

 <form method="get" action="https://cs12.net/form/submit.php">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>

 <form method="post" action="https://cs12.net/form/submit.php">
   <strong>Comments   </strong>
   <br/>

   <textarea name="comments" rows="10" cols="50">Please enter comments...   </textarea>
   <br/>

   <button type="submit">Submit Information   </button>
 </form>

 <form method="get" action="https://cs12.net/form/submit.php">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>

 <form method="get" action="https://cs12.net/form/submit.php">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>

 <form method="get" action="https://cs12.net/form/submit.php">
   <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>

 <form method="get" action="https://cs12.net/form/submit.php">
   <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>

 <form method="get" action="https://cs12.net/form/submit.php">
   <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>

 <form method="get" action="https://cs12.net/form/submit.php">
   <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>

 <p>Select a school:
 </p>
 <form method="get" action="https://cs12.net/form/submit.php">
   <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>

 <h4>Placeholder Text </h4>
 <p>Used to give instructions:
 </p>
 <form action="https://cs12.net/form/submit.php" method="post">
   <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">
   <p>
     <label for="expiration">Expiration:     </label>
     <input id="expiration" name="expiration" type="text" placeholder="MMYY"/>

     <br/>

     <button type="submit">Submit     </button>
   </p>
 </form>

In style element (<style>) within head element:

input.searchSubmit {
    background: url('./images/magnifier12.png') no-repeat;
    width: 16px;
    height: 16px;
    border: none;
    margin-left: 2px;
    text-indent: -9999em;}

 <form action="https://cs12.net/form/submit.php" method="post">
   <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>

 <form action="https://cs12.net/form/submit.php" method="post">
   <fieldset>
     <legend>Email     </legend>
     <p>Email:
       <input type="email" name="email_address" size="50"/>

     </p>   </fieldset>
   <p>
     <button type="submit">Submit     </button>
   </p>
 </form>

 <form action="https://cs12.net/form/submit.php" method="post">
   <fieldset>
     <legend>URL     </legend>
     <p>URL:
       <input type="url" name="url" size="50"/>

     </p>   </fieldset>
   <p>
     <button type="submit">Submit     </button>
   </p>
 </form>

 <form action="https://cs12.net/form/submit.php" method="post">
   <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>

 <form action="https://cs12.net/form/submit.php" method="post">
   <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>

 <table>
   <caption>A table   </caption>
   <tr>
     <th>Column 1     </th>
     <th>Column 2     </th>
     <th>Column 3     </th>   </tr>
   <tr>
     <td>row 1 column 1     </td>
     <td>row 1 column 2     </td>
     <td>row 1 column 3     </td>   </tr>
   <tr>
     <td>row 2 column 1     </td>
     <td>row 2 column 2     </td>
     <td>row 2 column 3     </td>   </tr>
   <tr>
     <td>row 3 column 1     </td>
     <td>row 3 column 2     </td>
     <td>row 3 column 3     </td>   </tr>
 </table>

 <p>United States Urban and Rural Populations
 </p>
 <table>
   <tr>
     <td>Year     </td>
     <td>Percent Urban     </td>
     <td>Percent Rural     </td>   </tr>
   <tr>
     <th>2010     </th>
     <td>80.3     </td>
     <td>19.7     </td>   </tr>
   <tr>
     <th>2000     </th>
     <td>79.2     </td>
     <td>20.8     </td>   </tr>
   <tr>
     <th>1950     </th>
     <td>64.0     </td>
     <td>36.0     </td>   </tr>
   <tr>
     <th>1900     </th>
     <td>39.6     </td>
     <td>60.4     </td>   </tr>
   <tr>
     <th>1850     </th>
     <td>15.4     </td>
     <td>84.6     </td>   </tr>
   <tr>
     <th>1800     </th>
     <td>6.1     </td>
     <td>93.9     </td>   </tr>
 </table>
 <p>Data from
   <a href="http://www.census.gov/">United States Census Bureau   </a>
 </p>

 <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>Year       </th>
       <th>Percent Urban       </th>
       <th>Percent Rural       </th>     </tr>   </thead>
   <tfoot>
     <tr>
       <td colspan="3">Data from
         <a href="http://www.census.gov/">United States Census Bureau         </a>       </td>     </tr>   </tfoot>
   <tbody>
     <tr>
       <th>2010       </th>
       <td>80.3       </td>
       <td>19.7       </td>     </tr>
     <tr>
       <th>2000       </th>
       <td>79.2       </td>
       <td>20.8       </td>     </tr>
     <tr>
       <th>1950       </th>
       <td>64.0       </td>
       <td>36.0       </td>     </tr>
     <tr>
       <th>1900       </th>
       <td>39.6       </td>
       <td>60.4       </td>     </tr>
     <tr>
       <th>1850       </th>
       <td>15.4       </td>
       <td>84.6       </td>     </tr>
     <tr>
       <th>1800       </th>
       <td>6.1       </td>
       <td>93.9       </td>     </tr>   </tbody>
 </table>

 <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">Year       </th>
       <th scope="col">Percent Urban       </th>
       <th scope="col">Percent Rural       </th>     </tr>   </thead>
   <tbody>
     <tr>
       <th scope="row">2010       </th>
       <td>80.3       </td>
       <td>19.7       </td>     </tr>
     <tr>
       <th scope="row">2000       </th>
       <td>79.2       </td>
       <td>20.8       </td>     </tr>
     <tr>
       <th scope="row">1950       </th>
       <td>64.0       </td>
       <td>36.0       </td>     </tr>
     <tr>
       <th scope="row">1900       </th>
       <td>39.6       </td>
       <td>60.4       </td>     </tr>
     <tr>
       <th scope="row">1850       </th>
       <td>15.4       </td>
       <td>84.6       </td>     </tr>
     <tr>
       <th scope="row">1800       </th>
       <td>6.1       </td>
       <td>93.9       </td>     </tr>   </tbody>
 </table>

 <table>
   <caption>United States Urban and Rural Populations   </caption>
   <thead>
     <tr>
       <th scope="col">Year       </th>
       <th scope="col">Percent Urban       </th>
       <th scope="col">Percent Rural       </th>     </tr>   </thead>
   <tfoot>
     <tr>
       <td colspan="3">Data from
         <a href="http://www.census.gov/">United States Census Bureau         </a>       </td>     </tr>   </tfoot>
   <tbody>
     <tr>
       <th scope="row">2010       </th>
       <td>80.3       </td>
       <td>19.7       </td>     </tr>
     <tr>
       <th scope="row">2000       </th>
       <td>79.2       </td>
       <td>20.8       </td>     </tr>
     <tr>
       <th scope="row">1950       </th>
       <td>64.0       </td>
       <td>36.0       </td>     </tr>
     <tr>
       <th scope="row">1900       </th>
       <td>39.6       </td>
       <td>60.4       </td>     </tr>
     <tr>
       <th scope="row">1850       </th>
       <td>15.4       </td>
       <td>84.6       </td>     </tr>
     <tr>
       <th scope="row">1800       </th>
       <td>6.1       </td>
       <td>93.9       </td>     </tr>   </tbody>
 </table>

 <table>
   <caption>United States Urban and Rural Populations   </caption>
   <thead>
     <tr>
       <th id="year">Year       </th>
       <th id="urban">Percent Urban       </th>
       <th id="rural">Percent Rural       </th>     </tr>   </thead>
   <tfoot>
     <tr>
       <td colspan="3">Data from
         <a href="http://www.census.gov/">United States Census Bureau         </a>       </td>     </tr>   </tfoot>
   <tbody>
     <tr>
       <th id="y2010" headers="year">2010       </th>
       <td headers="y2010 urban">80.3       </td>
       <td headers="y2010 rural">19.7       </td>     </tr>
     <tr>
       <th id="y2000" headers="year">2000       </th>
       <td headers="y2000 urban">79.2       </td>
       <td headers="y2000 rural">20.8       </td>     </tr>
     <tr>
       <th id="y1950" headers="year">1950       </th>
       <td headers="y1950 urban">64.0       </td>
       <td headers="y1950 ruran">36.0       </td>     </tr>
     <tr>
       <th id="y1900" headers="year">1900       </th>
       <td headers="y1900 urban">39.6       </td>
       <td headers="y1900 rural">60.4       </td>     </tr>
     <tr>
       <th id="y1850" headers="year">1850       </th>
       <td headers="y1850 urban">15.4       </td>
       <td headers="y1850 rural">84.6       </td>     </tr>
     <tr>
       <th id="y1800" headers="year">1800       </th>
       <td headers="y1800 urban">6.1       </td>
       <td headers="y1800 rural">93.9       </td>     </tr>   </tbody>
 </table>

 
 <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>

In style element (<style>) within head element:

p {
    color: red;
    background-color: blue;
  }

 <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>

 <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>

In style element (<style>) within head element:

p {
    color: black;
    background-color: teal;
    padding: 1em;
    font-family: helvetica, sans-serif;
    text-align: justify;
    margin: 2em;
  }

 <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>

In head element:

<link rel="stylesheet" href="example30.css"/>

In example30.css

p {
    color: black;
    background-color: teal;
    padding: 1em;
    font-family: helvetica, sans-serif;
    text-align: justify;
    margin: 2em;
  }

 <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>

In style element (<style>) within head element:

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;
}

 
 <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>

In style element (<style>) within head element:

    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;
    } 

 
 <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>

In style element (<style>) within head element:

li em { color: red; background-color: navy;}

 
 <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>

In style element (<style>) within head element:

body { color: navy; }
em { color: red; }
div { color: green; }

 <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>

 <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>

 <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>

 <div>font-weight can be used to make
   <span style="font-weight: bold">text appear bold   </span>.
 </div>

 <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>

 
 <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>

In style element (<style>) within head element:

body {
      font: normal normal normal x-large/200% arial, helvetica, sans-serif;
}

 <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>

 <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>

 
 <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> 

In style element (<style>) within head element:

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;
}

 <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>

In style element (<style>) within head element:

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;
   }

 
 <form method="post" action="https://cs12.net/form/submit.php">
   <label>Name:
     <input type="text" name="name"/>
   </label>
   <label>Email Address:
     <input type="email" name="email"/>
   </label>
   <button type="submit">Submit   </button>
 </form>

In style element (<style>) within head element:

  label { display: block; margin-top: 1rem;}
  input { display: block;}
  button { display: block; margin-top: 1rem;}

 
 <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>

In style element (<style>) within head element:

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;
}