It has become a festering problem because concerned students were summarily dismissed when they tried to call attention to flaws that would become a nightmare to correct.
The above markup excerpt is from a big, complicated Website with a big, complicated linked external CSS document -- which might intimidate a low-level student clerk charged with inputting text. However, note that the page already contains two embedded <STYLE> sections</STYLE>.
It would be hoped that even a rank-beginner novice would know: embedded <STYLE> rules </STYLE> only affect that particular page; contextually-defined rules make style even more specific; inline style attributes are least efficient but can be applied to any tag; HTML content markup should be semantic and logical; CSS style rules should make HTML markup as clear and clean as possible; multiple space-separated class definitions can be applied to same element; sections should be distinguished by logical semantic headings ... . Anybody familiar with a word-processing or typography/layout program should recognize the benefit of defining and applying a set of styles to an easily-distinguished identifying element, which would make find/replace more efficient.
The excessive <SPAN> style attributes </SPAN> indicate the heading style of choice to be sans-serif, underlined blue (which is misrepresentation of universal browser default for links). The prevailing external styles for headers in given <DIV> seem to be { color: #000000; font-family: Georgia, "Times New Roman", Times, serif; }and the h4, h5, h6 font-size are extremely small.
Based on above assumptions, and without considering new HTML5 or CSS3 possibilities, the following might be a simple fix.
<style type="text/css">
/*.serif was already on page*/
.serif { font-family:"Times New Roman",Georgia,Serif; }
/*could add these .bios style rules to page */
.name { text-align:left; color: blue; border-bottom: navy thin solid; background-color: /*silver*/ #ebebeb; width: 100%; }
.bios img { float: left; width: 100px; height: auto; border: none; margin: 2px; padding: 2px; }
.bios h4, .bios h5, .bios h6 { font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 1.2em; line-height:1.2em; letter-spacing: .1em;
padding: 0 4px; margin: 20px 20px 0 2px;;
background-color: #ffffff; color: #0000ff;
text-align: left; }
.bios h5 { text-decoration: underline; }
.bios p { text-indent: 2em; text-align: left; text-decoration: none; font: normal 1.0em/1.2em;; color:black; background: white; padding: 0 4px; margin: 0; letter-spacing: 0;}
.bios p + p { text-indent: 2em; }
.bios ul { margin:0; padding:0; }
.bios ul li { font-size: 1em; line-height: 1.2em; padding: 0 4px 0 2px; margin: 0 4px 0 2px;}
.bios dl { }
.bios dt { }
.bios dd { }
.bios dd p { }
.bios a { }
.bios a:link { }
.bios a:visited { }
.bios a:focus { }
.bios a:hover { }
.bios a:active { }
.bios a:target { }
</style>
. . .
<div class="bodyCopy bios"><!--add BIOS class-->
<div id="printContent">
<h3 class="name">This page is being updated. More to come.</h3><!--example alternate to underlined blue-->
<h5><a name="Firstbio Person" id="Firstbio Person">Firstbio Person</a> as a named link</h5>
<p>I ...</p>
<p>And so forth ...</p>
<h5>Secondbio Person</h5>
<p>My name is ... </p>
<p>My advice to students currently studying . . . if you find you are stuck and do not know how to get a specific result, google it!</p>
<p>Some of the websites I find useful are:</p>
<ul>
<li><a href="http://www.w3schools.com">http://www.w3schools.com/</a></li>
<li><a href="http://library.creativecow.net/">http://library.creativecow.net</a>
</ul>
The <DL> Definition List <DT> Definition Term and <DD> Definition Data seem like natural markup tags for this sort of biographical entry. And a JavaScript, jQuery or even CSS3 expandable accordion content approach would condense page nicely.
See, for example, http://css-tricks.com/utilizing-the-underused-but-semantically-awesome-definition-list/ and https://mail.google.com/mail/?shva=1#inbox/13c83981761032e8
