CSS Head

How to create a simple navigation bar with a horizontal subnav. In most cases we can achieve this effect purely with CSS, but for IE6 we will use a few lines of jQuery to cover all grounds…

There’s a common newspaper and print layout method where the text of an article is arranged over several columns. This makes the article easer to read and looks quite nice visually. Wouldn’t it be great if you could do this with CSS? Well, in fact this is perfectly possible using the multi-column layout module that is part of the CSS3 specification. Whilst browser support for this is patchy, the module is approaching candidate recommendation status, and the method can still be implemented using proprietary but well-supported CSS rule prefixes like -moz- and -webkit- in your style sheets. For browsers that do not support the multi-column layout module in any form, there’s a useful JavaScript solution…

How to write your style sheets more efficiently. Covers these points:

• A style sheet should be easy to read
• A style sheet should be easy to maintain
• A style sheet should be well commented
• The time to achieve these goals shouldn’t negatively impact the development time of a website.

Elastic is a simple css framework to layout web-based interfaces, based on the printed layout techniques of 4 columns but with capabilities to unlimited column combinations. and capacity to make elastic, fixed and liquid layout easily. Elastic provides a declarative syntax language to define the layout structure and behavior. It’s like having a conversation with your code. This way you don’t have to remember cryptic class names, just express what you want…

Making your website compatible with a wide range of browsers is probably the hardest task of a front-end developer. To make your coding life easier, here are over 15 tools and techniques for cross-browser CSS development…

Formatting has nothing whatsoever to do with how the CSS functions. But that’s not to say formatting isn’t important. That would be like saying the choice of canvas isn’t important to a painter. It affects how it feels to write CSS, how easy it is to read, how easy it is to navigate, and how easy it is to revisit and reacquaint yourself with previously written CSS…

Here is a presentation on the CSS cascade. A simple step-by-step tutorial on the CSS cascade – for web designers and developers who are new to CSS or have struggled with the Cascade…

Currently when you place an image or any ‘replaced content’ inside a block with rounded corners set by -webkit-border-radius, the image pokes through the rounded corners on Safari version 4.01 at the time of writing.

The expected and desired behaviour is that the image be cropped by the rounded corners. This can be achieved by applying overflow:hidden to the container but…

A simple, but comprehensive step-by-step presentation on CSS line-height. Covers leading, how to apply various line-height values, as well as line-height and the inline box model. Well worth a read…

The letterpress effect is one of the 2009 trends and is present in a lot of websites. It simply works because it adds a touch of “tactile” to the overall design and at the same time looks good with gradients, shadows, etc. Let’s see a quick way to add this effect to our sites using only CSS…