CSS Workshop


4/1/03: W3C buttons without images

3/22/03: Another Italian translation: Angoli arrotondati con i CSS

1/27/03: Two of my articles were translated to Italian:

Hi, my name is Marek and this page is my first attempt to publish some of my CSS work in English. You are welcome to study, copy and use everything you find here. I'll appreciate your questions, suggestions, bug reports and any other kind of feedback.

There is not much stuff here for now. Although I developed about 30 interesting CSS samples for my articles and especially for my latest book on CSS (in Czech), their comments are in Czech and translation into English takes some time. However I believe that more samples will come soon.

CSS Samples

W3C buttons without images

Do you know those still popular white&yellow W3C validation icons? What about to get rid of the images and replace them with HTML and CSS only?

Styling <abbr> in IE

Internet Explorer for Windows does not support the <abbr> element. It neither displays its title attribute, nor applies CSS to it. Fortunately, there is a simple workaround.

Styling <hr>

How to use structural <hr> elements and style them via CSS.

Moving margins and paddings in IE5/Win

Horizontal margins and paddings of nested DIVs behave strangely in IE 5/Win. Sometimes they move from one DIV to another.

Horizontal Menus

How to transform a simple HTML list into a horizontal menu. These samples are based on floating LI elements and this approach, compared with setting the LIs inline, brings both interesting benefits and issues.

Rounded Corners

Rounded corners — the goal of many CSS designers — can be achieved by various methods. This one uses nested DIVs and graphic background. I like it the most, because it nicely separates presentation from structure.

Recommended reading

A couple of books on CSS I've found most useful.

CSS Bug Ring

Interested in CSS compatibility issues, bugs and workarounds? Don't miss the other web sites in the CSS Bug Ring.

Go Top