https://thedailywtf.com/articles/Styling_With_Classy_CSS

[wtf-logo]

  * Feature Articles
      + Most Recent Articles
      + Locally Variable
      + Modular Dependencies
      + A Single Bug
      + Picking Your Consultants
      + Succesful Deployment
      + The Debugging Tool
      + DXL
      + Slow Boat Construction
  * CodeSOD
      + Most Recent Articles
      + Not My Domain
      + UTF-16 Encoding
      + Legacy Horrors
      + High Performance Query
      + End this Date Now
      + It's All Right
      + Cast a Different Spell
      + Set Your Performance Target
  * Error'd
      + Most Recent Articles
      + Look, Up In the Sky!
      + Self Driving Level NaN
      + Cold Shoulder'd
      + Tomorrow, and tomorrow
      + Supernatural
      + [ insert title here ]
      + Number Theories
      + Soups On
  * [forums-ico] [forums-ico] Forums
  * Other Articles
      + Random Article
      + Other Series
      + Alex's Soapbox
      + Announcements
      + Best of...
      + Best of Email
      + Best of the Sidebar
      + Bring Your Own Code
      + Coded Smorgasbord
      + Mandatory Fun Day
      + Off Topic
      + Representative Line
      + News Roundup
      + Editor's Soapbox
      + Software on the Rocks
      + Souvenir Potpourri
      + Sponsor Post
      + Tales from the Interview
      + The Daily WTF: Live
      + Virtudyne

[ ] [mobile-men]

  * feature articles
  * codesod
  * error'd
  * forums
  * other articles
  * random article

[2ab2b88716]

Styling With Classy CSS

by Alex Papadimoulis in Feature Articles on 2006-01-18 Edit
[apx-square] Alex Papadimoulis

Founder, The Daily WTF

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

[buildmaste] [Advertisement] BuildMaster allows you to create a
self-service release management platform that allows different teams
to manage their applications. Explore how!
View all 116 comments >>
 
---------------------------------------------------------------------
The Green, the Whole Green, and Nothing But the Green >> << Ask Thrice
and Ye Shall Receive
Contact Privacy Policy RSS
---------------------------------------------------------------------

Copyright (c) 2023 Inedo Publishing - v2023.2

Monitored by Panopta * Deployed with BuildMaster