This posts was originally published on SansFiltre

Microformats are a simple way to structure informations in (X)(HT)ML.

This CSS allow to show the Microformats bits contained in a page. View a page.

Design principles
  • Simplicity: Use only a CSS, no image, nothing else
  • Portability
  • Be unobtrusive but visible
  • Use the green color to remind of the logo
  • For inline elements, one clue is enough
  • For block element, a start and end element is needed but not sufficient. That is the reason for the border.
Usage

To install, just copy the file "microformats.css" in the directory next to your CSS, then at the end of your CSS add a line with

@import "microformats.css";
Camino/FireFox

The Camino default style sheet is in

~/Library/Application Support/Camino/chrome/userContent.css

The FireFox default style sheet is in

~/Library/Application Support/Firefox/Profiles/profilename/randomstring.default/chrome/

And restart Camino/FireFox

Thunderbird
~/Library/Application Support/Thunderbird/Profiles/profilename/randomstring.default/chrome/
Safari

Put the css file anywhere you like (your username/Library/Safari/ folder might be a good place) and then select it in Preferences > Advanced > Style Sheet. Restart Safari.

Others

Just find the default local CSS and add the line

@import "microformats.css";

at the end of the file.

Notes:

Idea from the DotClear style sheet.
Some informations found on http://www.hicksdesign.co.uk/journa... found via the Microformat wiki