Styling With Classy CSS

A number of the submissions I receive here are in some way based around HTML. Bizarre as they may be, I generally excuse them: after all, just about any amateur can use some WYSWYG-editor to mangle HTML. And besides, HTML really isn't programming. But no less, I couldn't pass up this find by Sam Gabrielsson. He happened to browse the HTML-source of TV.com and noticed some interesting CSS-class references ...

<div class="mr-5 f-xbig f-bold">1.</div>

<td class="f-white f-bold p-5 f-medium ta-r" style="border-top:1px solid #093B70;">

<td class="ta-r f-white pr-10">NBC</td>

Intrigued, he dug a little deeper into their stylesheets and learned that the developers were able to find a way to tie back together style and content within a technology designed to do the opposite ...

    /* Combined from http://www.tv.com/style/1/css/layout.css
     and http://www.tv.com/style/1/css/fonts.css */

  .fl {float:left;}
  .fr {float:right;}
  .fn {float:none;}

  .mt-0 {margin-top:0px;}
  .mt-5   {margin-top:5px;}
  .mt-10  {margin-top:10px;}
  .mt-15  {margin-top:15px;}
  .mt-20  {margin-top:20px;}
  .mt-30  {margin-bottom:30px;}
  .mb-0 {margin-bottom:0px;}
  .mb-5   {margin-bottom:5px;}
  .mb-10  {margin-bottom:10px;}
  .mb-15  {margin-bottom:15px;}
  .mb-20  {margin-bottom:20px;}
  .mb-30  {margin-bottom:30px;}
  .mr-5   {margin-right:5px;}
  .mr-10  {margin-right:10px;}
  .mr-15  {margin-right:15px;}
  .mr-20  {margin-right:20px;}
  .mr-30  {margin-right:30px;}
  .ml-5   {margin-left:5px;}
  .ml-10  {margin-left:10px;}
  .ml-15  {margin-left:15px;}
  .ml-20  {margin-left:20px;}
  .ml-30  {margin-left:30px;}

  .f-verdana  {font-family:Verdana;}
  .f-arial  {font-family:Arial;}

  .f-12, .f-12 a    {font-size:12px;} /* default for body */

  .f-normal   {font-weight:normal;}
  .f-bold     {font-weight:bold;}
  .f-italic   {font-style:italic;}

  .f-green  {color:#060;}
  .f-med-green  {color:#3c0;}
  .f-lt-med-green {color:#6f0;}
  .f-lt-green {color:#9f0;}
  .f-yellow-green {color:#cf0;}
  .f-yellow {color:#ff0;}
  .f-orange {color:#fc0;}
  .f-lt-orange  {color:#f90;}
  .f-drk-orange {color:#f60;}
  .f-lt-red {color:#f30;}
  .f-red    {color:#c00;}
  .f-red2   {color:#c00;}
  .f-lt-yellow  {color:#ffc;}
  .f-teal   {color:#cff;}
  .f-lt-blue  {color:#9cf;}