Good CSS Articles Round-up

I seem to have a backlog of good css articles that I have bookmarked and not posted yet, so I thought I'd do just that in one post ...

woork: Write a well structured CSS file without becoming crazy

This is a descriptive post about how to write a well structured CSS file. I already spoken about code readability in CSS files, but after several most specific requests about this argument (mainly about the difficult of some readers to manage CSS file with a big quantity of layout elements), I decided to illustrate the process I use in these cases.

Combating Classitis with Cascades and Sequential Selectors

There is a disease out there in the CSS world. It can afflict anything from the meanest weblog (or the nicest ones too, I suppose) to the greatest of corporate websites. It’s called Classitis, and I’ve encountered it far too often in my professional work. Perhaps you’ve seen it too. It looks a little something like this:

CSS Hover Icon Menu Using CSS Sprites

Swapping icons on hover is traditionally done using JavaScript but this method requires a lot of unnecessary code and a number of different icons in order to achieve what should be really simple. However, there is a solution and this tutorial will explain how to apply different hover over icons to an unordered list using CSS Sprites.

Creating Equidistant Objects with CSS

Creating a horizontal row of objects that are equidistant from each other is another one of those things in web design that is much more difficult than it should be. This can be a very useful thing to do, especially in fluid width layouts when you are trying to make the most of whatever horizontal space you have.

reForms CSS Form Design Template for Any Layout

The reForms technique is a CSS and Javascript solution I'm working on for form design issues. Although it isn't complete, I'm providing a few code snips from the CSS and HTML that may be useful to other developers. This post describes a form element layout technique that will shrink and grow with the available space. This allows designers to create 2 and 4 column form layouts without breaking the design. It also allows the user to resize their browser window and change font size without rendering the form unusable.

CSS Trick: Creating a Body-Border

Hicksdesign has been “fiddling” with their site design. The new design features what someone called in the comments a “Body Border”. It’s basically a stroke of color just inside the entire viewable area, all the way around, in the browser window. I thought it was a nice touch and a pretty spiffy little CSS trick so I thought I’d feature how it was done here.

Creating Custom Double Solid Borders for Images

In this brief tutorial I will show you how to create solid double borders for images and style them however you wish.

How to Create Beautiful and Elegant HTML Lists Using CSS

HTML list have become one of the most used HTML elements for marking-up various semantic content structures — navigation, comments and even image galleries. This article will explain and show you how to style lists inside blog posts, articles or other basic HTML documents.