Session 03 - HTML, Introduction to CSS

While exploring forms, it is useful to use a simple "echo" CGI program, which will simply echo back the name/value information your form submitted (https://cscie12.dce.harvard.edu/echo).

<form method="post" action="https://cscie12.dce.harvard.edu/echo">
Email Address:
<input type="text" name="email"/><br/>
<input type="submit"/>
</form>

<form method="get" action="https://cscie12.dce.harvard.edu/echo">
Email Address:
<input type="text" name="email"/><br/>
<input type="submit"/>
</form>

<form method="post" action="https://cscie12.dce.harvard.edu/echo">
Email Address:
<input type="text" name="email"/><br/>
<input type="submit"/>
</form>

<form method="get" action="https://cscie12.dce.harvard.edu/echo">
Email Address:
<input type="text" name="email" size="50"/><br/>Year of Birth:
<input type="text" name="year_of_birth" size="50" maxlength="4"/><br/>Year of Birth:
<input type="text" name="year_of_birth_2" size="5" maxlength="4"/><br/>
<input type="submit" name="action" value="Proceed"/>
</form>

<form method="get" action="https://cscie12.dce.harvard.edu/echo">
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>

<form method="get" action="https://cscie12.dce.harvard.edu/echo">
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>

<form method="post" action="https://cscie12.dce.harvard.edu/echo">
<strong>Comments</strong><br/>
<textarea name="comments" rows="10" cols="50">Please enter comments...</textarea><br/>
<input type="submit" name="action" value="Proceed"/>
</form>

<form method="get" action="https://cscie12.dce.harvard.edu/echo">
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>

<form method="get" action="https://cscie12.dce.harvard.edu/echo">
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>

<form method="get" action="https://cscie12.dce.harvard.edu/echo">
<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"/>
</form>

<form method="get" action="https://cscie12.dce.harvard.edu/echo">
<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>

<form method="post" action="https://cscie12.dce.harvard.edu/echo">
Secret word:
<input type="password" name="secretword" size="10"/><br/>
<input type="submit" name="action" value="Proceed"/>
</form>

<form method="get" action="https://cscie12.dce.harvard.edu/echo">

<input type="hidden" name="myhiddenvariable" value="myhiddenvalue"/>
<input type="submit" name="action" value="Proceed"/>
</form>

<form method="post" enctype="multipart/form-data" action="https://cscie12.dce.harvard.edu/echo">
Upload two files:<br/>
<input type="file" name="file1"/><br/>
<input type="file" name="file2"/><br/>
<input type="submit" name="action" value="Upload"/>
</form>

<form method="get" action="https://cscie12.dce.harvard.edu/echo">
<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><div>Do you enjoy basketball?</div>
<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><br/><div>Do you enjoy baseball?</div>
<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>
<input type="submit"/></div>
</form>

<p>Select a school:</p>
<form method="get" action="https://cscie12.dce.harvard.edu/echo">

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

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

</form>

In style element (<style type="text/css">) 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://cscie12.dce.harvard.edu/echo" 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>
<input type="submit"/></p>

</form>

<form action="https://cscie12.dce.harvard.edu/echo" method="post">
<fieldset><legend>Email</legend><p>Email:
<input type="email" name="email_address" size="50"/></p>
</fieldset><p>
<input type="submit"/></p>

</form>

<form action="https://cscie12.dce.harvard.edu/echo" method="post">
<fieldset><legend>URL</legend><p>URL:
<input type="url" name="url" size="50"/></p>
</fieldset><p>
<input type="submit"/></p>

</form>

<form action="https://cscie12.dce.harvard.edu/echo" 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>
<input type="submit"/></p>

</form>

<form action="https://cscie12.dce.harvard.edu/echo" 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>
<input type="submit"/></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 type="text/css">) 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 type="text/css">) 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" type="text/css" href="example32.css"/>

In example32.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 type="text/css">) 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;
}

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

In style element (<style type="text/css">) within head element:

    #main { 
            background-color: blue; 
            color: white;
            border-color: green; 
            border-width: thick; 
            border-style: solid; 
    } 

 <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 type="text/css">) 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 type="text/css">) 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 type="text/css">) 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>

 <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 type="text/css">) 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;
}