Description

Some various applications of CSS (Cascading Style Sheets). Teach yourself more here.

Cascading outline bullets

Here is a simple technique for cascading CSS outline bullets.

Kwiki CSS

This is a nice example of how CSS can radically alter the appearance of a site. Here is the before and after Kwiki CSS to see how it looks. If you run your own Kwiki, please feel free to take it and try it: kwiki-ashley-one.css. If you don’t use Kwiki, I really encourage you to try it. Either for a community or just your own projects, it’s a simple wiki that is surprisingly easy to install and use.

Buttonize CSS

Here’s a sample of what can be done. It’s a nice way to get rollover behavior without the graphics. Dramatically easier to update and you don’t need JavaScript active for it to work.

It is easy to manipulate the colors, border-style, and whatever else you want.

<style type="text/css">
a.buttonize {
 font-size:85%;
 color:#ffe;
 background-color:#226;
 font-family:'trebuchet ms', sans-serif;
 font-weight:bold;
 padding:0px 1px 0px 2px;
 border:1px outset #369;
 letter-spacing:2px;
 text-decoration:none;
}
a:hover.buttonize, a:active.buttonize {
 text-decoration:none;
 color:#226;
 background-color:#ff7;
 border:1px inset #69a;
}
</style>
    ...
<div style="text-align:center">
 <a class="buttonize" href="./">Résumé</a> &#183; 
 <a class="buttonize" href="rss-feed.html">XML</a> &#183; 
 <a class="buttonize" href="typo.html">Typography</a> &#183;
 <a class="buttonize" href="perl-jobs.html">Jobs</a> &#183;
 <a class="buttonize" href="bib.html">Books</a> 
</div>