free style

welcome to my blog

by michael on october 31, 2006

This template was inspired by some artist friends of mine and I hope you find it useful, fell free to download it at You can replace the title to the left by changing the text in the HTML or by using a bitmap graphics application to modify the background graphic and add your own styled text.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh. Vivamus viverra. Nullam turpis. Vestibulum sed etiam. Euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

bold and em styles

by michael on october 26, 2006

SkaterIf you need to make more room for the blog titles and keep them on one line, simply adjust the size of the #content H1 style. Bold text looks like this. It's 'Arial Black' and #FFF just like the title and the headers, however, if the person viewing the site removed 'Arial Black' then the font-weight:600 property will take care of bolding it as much as possible.

Emphesized or italisized text looks like this. I don't think the look of Arial's italics stands out, so I usually swap it out with Georgia.

hover news & quotes

by michael on october 18, 2006

SkaterRight under the navigation menu to the right you will see a heading called Recent Updates. If you hover over the news items a short summary will pop up and allow you to click to get to another page. You can use this as a link list giving people a short description of what your link is about. I learned the technique from Stu at CSS Play. The original demo was to display a small photo gallery this way but I adapted it for text.

This is what quoted text looks like. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

and don't forget lists

by michael on october 2, 2006

This is just a simple unordered list with a small 9×9 transparent 2-color gif in the shape of a diamond. It lists the browsers I tested this template with.

The ordered list shared most of the same propertties save for the list item image above.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipisicing elit
  3. Sed diam nonummy nibh
  4. Vivamus viverra. Nullam turpis