CSS Stylesheet Author Tips

revised 12 Sep 2005

Copyright © 2003–2008 by Stan Brown, Oak Road Systems

Contents: 

Want to set up a stylesheet without knowing CSS? The W3C Core Styles will get you started. On the other hand, Strange Banana will generate a random stylesheet each time you access it.

Floats and Positioning

Restore full line width after a float

From Containing Floats by Eric Meyer:

Method 1: Add a zero-height div

div.clearer {clear: left; line-height: 0; height: 0;}

<div class="item">
 <img src="w6144.gif">
 Widget 6144
 <br>$39.95
 <div class="clearer"> </div>
</div>

Method 2: Float the enclosing item also

"In most browsers, and as defined in CSS2.1, a floated element will expand to contain any floated elements that descend from it." So if you want to have a floated-left image inside a boxed div, you can code it like this:

div.item {float: left; border: 1px solid; padding: 5px; width: 60%;}
div.item img {float: left; margin: 5px;}

Align text parts left and right on a line

Method 1: In the HTML:

<h3>Blabla left <span class="part2">blabla right</span></h3>

In the CSS:

h3 { position: relative; }

h3 .part2 { position: absolute; top: 0; right: 0; }

source: newsgroup article "Text aligned left and right on the same line" by Jukka K. Korpela (Xns937C95820D2E1jkorpelacstutfi@193.229.0.31, 2003-05-15)

Method 2: In the HTML:

    <div class="lraexampletop">
        <div class="left">Left aligned text</div>
        <div class="right">Right aligned text</div>
    </div>

In the CSS:

    div.lraexampletop{text-align:right;margin:1em 0;padding:0}
    div.lraexampletop div{display:inline}
    div.lraexampletop div.left{float:left}
    body>div.lraexampletop{display:table;width:100%}
    body>div.left,body>div.right{display:table-cell}
    body>div.left{float:none;text-align:left}
    body>div.right{text-align:right}

source: <http://www.spartanicus.utvinternet.ie/left_and_right_alignment_using_css.htm>

Center tables and other block-level elements

See Centering Blocks with CSS and Centering Tables with CSS, both by Nicholas G. Theodorakis.

Extend a floated image the height of the document

Stephen Poley provides these styles at <http://www.xs4all.nl/~sbpoley/webmatters/layout5.html>:

    #outer  { background: url(img/stripes_left.jpg); 
              background-repeat: repeat-y;
              background-position: left;
            }
    #inner  { background: url(img/stripes_right.jpg); 
              background-repeat: repeat-y;
              background-position: right;
            }
    #content { margin-left: 75px; margin-right: 75px; padding: 1em; }

outer, inner, and content are nested <div>s, in that order.

Lists

Indent list items consistently across browsers

Set both margin-left and padding-left for ul and ol elements. (Either set padding to 0 and margin to the desired indent, or vice versa. But you must specify both to have a consistent indent amount across brosers.)

source: Consistent List Indentation by Eric A. Meyer

Multicolumn lists

From Anne van Kesteren in (brpq5i$aqr$1@reader08.wxs.nl, 3002-12-17): "Small example with fixed width in px ignoring accessibility here for a moment. We have the following unordered list: 

    <ul>
        <li>Item 01</li>
        <li>Item 02</li>
        <li>Item 03</li>
        <li>Item 04</li>
        <li>Item 05</li>
        <li>Item 06</li>
        <li>Item 07</li>
        <li>Item 08</li>
        <li>Item 09</li>
    </ul>

"That is the markup. Now it is time to style:

    ul{
        margin:0;
        padding:0;
        list-style:none;
        width:600px;
    }
    ul li{
        margin:0;
        padding:0;
        display:block;
        float:left;
        width:200px;
    }

"

Text Treatments

Show URLs after Link Text

This can be useful in a print stylesheet, where links are no longer clickable.

a:link:after, a:visited:after {
   content: " (" attr(href) ") ";
   font-size: 90%;
   }

source: CSS Design: Going to Print by Eric Meyer

Prevent sub/superscripts from distorting line spacing

From the stylesheet <http://ppewww.ph.gla.ac.uk/~flavell/style.css>: 

    /* put some air into the line-height, then scale-down the line-height
       used for sub/sup.  Supposed to reduce the higgledy-piggeldy effect.
       (Suggested by Matt McIrvin - thanks!  */
    p { line-height: 115%; }
    sub, sup { line-height: 0.1em; }

Jukka Korpela's thoughts are at <http://www.cs.tut.fi/~jkorpela/math/#subsup> — scroll down to "Uneven line spacing".

Menus and Navigation

Put navigation links at the left

See Jukka Korpela's Page Layout Using CSS: a Very Simple Example, which even works in MSIE4.

Style the link of the current page specially

Give each page <body> a different ID, and also give each link in the menu a different ID. See <http://www.porjes.com/pages/p1.html> for an example.

Make buttons for a menu

Create a tabbed menu interface

Mike Hall has a great tutorial and demo.

Tables and Substitute Tables

Control cell borders

"Setting the border attribute in HTML sets a border both for the table as a whole and for individual cells," according to Jukka Korpela in (Xns940EEFDF02BA9jkorpelacstutfi@193.229.0.31, 2003-10-08). "It would be conceptually best to set borders either in HTML only or in CSS only, but ... to have some fallback for non-CSS browsing situations, ... [u]se e.g. <table ... border="2"> in HTML and 

    table  { border-collapse: collapse;
            border: none; }
    th, td { border: grove 2px; }

in CSS."

Make a table body scroll

Use overflow:auto, as in this illustrations, downloaded 2003-06-19 from here. This works only in Gecko browsers at present.

col 1col 2col 3col 4
col 1col 2col 3col 4
0000
1111
2222
3333
4444
5555
6666
7777
8888
9999

This one claims to work in MSIE, Gecko, and Opera. (It's also stored locally.)

(updated September 2005)

Align thumbnail captions without using tables

Use an <li> element styled as display:block and floated left, with approprite width. It's explained in this thread, archived at Google.

In that thread, Jim Dabell said:

I don't think that you can achieve captions underneath each image without switching to block-level elements. Change over to

        { display: block; float: left; width: [whatever]; }

for each <li> element.

If you don't mind living on the cutting edge (of a specification that is five years old on Monday), use the title attribute:

        img:after {
                content: attr(title);
                display: block;
        }

Otherwise, you can put the text straight into the <li> element for each image.

Later in the thread, Everyjan offered this ready-made code:

        <style>
        ul {
        display:inline;
        margin:0em;
        padding:0em;
        }
        ul li {
        display:inline;
        list-style-type:none;
        }
        ul li span {
        width:200px;
        text-align:center;
        }
        </style>

        <ul>
        <li>
        <span>
        <a href="url">
        <img src="images/anne.jpg" alt="anne" border=0>
        </a>
        <br>
        your text
        </span>
        </li>
        <li>
        <span>
        <a href="url">
        <img src="images/anne.jpg" alt="anne" border=0>
        </a>
        <br>
        your text
        </span>
        </li>
        </ul>

source: newsgroup article "Can thumbnails be aligned without tables?" by Jim Dabell (8-adnUmTaqWp_t-iRVn-hQ@giganews.com, 2003-08-19)

General Issues

Link to multiple alternative style sheets

See Multiple linked stylesheets, which also refers to an article at A List Apart and of course the Specifying External Style Sheets from the HTML 4.01 spec.

User style sheet to override "tag soup"

Rijk van Geijtenbeek suggests in (oprzhyw1wiicz8n2@news.individual.net, 2003-12-01):

    body, p, p *, li, li *, td, td *, font[face] {
        font-family: tahoma !important;
    }
    body, p, li, td * {
        font-size: 100%  !important;
    }

Hide CSS from older browsers

See <http://w3development.de/css/hide_css_from_browsers/>.

Get around the "Peekabo" bug

Sometimes Internet Explorer simply fails to display positioned content. See IE6 Peekabo Bug.

Be well organized

RichInStyle has a good checklist on organizing your stylesheet.

What's New