Sample Style Sheets

Copy any or all of the following to your Web server or hard drive, depending on your preference, and use them as you will. The creator (above) will help you create favelets that point to your local copies. Do not point to the copies on meyerweb! That would defeat the whole point, which is to have local copies that you can change. If I start to see these style sheets appear in my server logs, I will take... steps.

tableshow

Outlines table structure by making table borders solid red, table headers dotted red, and table cells dotted purple. It also throws in some small margins and padding to spread things apart and make the table structure easier to see.

fontpop

Draws attention to any font elements on the page. Trust me, you'll know when it happens. Also selects elements that descend from font elements in case you have one of those pages where a font is wrapped around three paragraphs or something.

style-attr

Draws a dashed red border around any element that has a style attribute. This can help work out which elements are likely to be trouble if you try to style them from a style sheet.

no-alt

Adds a green "border" (actually padding and a background) and a red border to any image that has no alt attribute. A validator will tell you the same thing, but this is visual.

aggregate

A style sheet that imports all the other ones listed here. This allows easy diagnosis of page problems all at once.

For more excellent favelets/bookmarklets, please see favelets.com and Jesse's Bookmarklets.