[Web4lib] styling del.icio.us links for use on a html page?

[tomkeays at gmail.com]

Look at the instructions for styling tags at
http://del.icio.us/doc/feeds/js/styling

Nearly every HTML element has a class for CSS styling. A sample
linkroll with two bookmarks:

<div class="delicious-posts" id="delicious-posts-username">
 <h2 class="delicious-banner">
  <a href="http://del.icio.us"><img
src="http://images.del.icio.us/static/img/delicious.med.gif"
width="16" height="16" alt="" /></a>
  <a href="http://del.icio.us/username">my del.icio.us</a>
 </h2>
 <ul>
  <li class="delicious-post delicious-odd">
   <a href="http://www.metababy.com/"
class="delicious-link">historyless wiki</a> /
    <a href="http://del.icio.us/username/art" class="delicious-tag">
  </li>
  <li class="delicious-post delicious-even">
   <a href="http://www.superbad.com" title="my extended text"
class="delicious-link">superbad</a> /
    <a href="http://del.icio.us/username/science" class="delicious-tag">
    <a href="http://del.icio.us/username/deep" class="delicious-tag">
   <p class="delicious-extended">my extended text</p>
  </li>
 </ul>
</div>

You then concoct your del.icio.us stylesheet rules to control the
display. The example given was:

.delicious-posts { margin: 1em; border: 2px solid #ddd; padding:
0.5em; width: 20em; font-family: sans-serif; }
.delicious-posts ul, .delicious-posts li, .delicious-banner { margin:
0; padding: 0}
.delicious-post { border-top: 1px solid #eee; padding: 0.25em; font-size: 80% }
.delicious-odd { background-color: #f8f8f8 }
.delicious-banner a { font-size: 80% }
.delicious-posts a:hover { text-decoration: underline }
.delicious-posts a { text-decoration: none; color: #a15426; display:
block; padding: 0.3em }
.delicious-post a { color: #04a1ff }