The Opera logo rendered only with CSS, no images. Very interesting.

Opera logo

Two articles on CSS3:

• Push Your Web Design Into The Future With CSS3
• Take Your Design To The Next Level With CSS3

An article on A List Apart on mobile browsers and style sheets:

Return of the Mobile Style Sheet

After the article about CSS tables on Digital Web Magazine, another one on Vitamin:

Tables: The Next Evolution in CSS Layout

On 456 Berea St :

The order of link pseudo-classes matters

I rember wasting hours years ago trying to figure this one out...

A very interesting article on Digital Web Magazine :

Everything You Know About CSS Is Wrong

Two CSS links:

• Perfect multi-column CSS liquid layouts
• Using CSS to Fix Anything

An interesting article on the use of font-stacks:
Better CSS Font Stacks

And a guide to the most common fonts on Windows, Mac and Unix platforms:
CSS font sampler and survey

“ There are two popular approaches to positioning with CSS: float and absolute positioning. Both approaches have their pros and cons. My teammates and I have developed a new positioning approach that gives us the best of both worlds. After quite a bit of experimenting and testing, it's time to share the technique with the rest of the world and see how we can work together to improve it. I'm calling it faux absolute positioning after the faux columns technique that simulates the presence of a column.”

Faux Absolute Positioning

“ Here's the punchline: the effects of declaring line-height: normal not only vary from browser to browser, which I had expected - in fact, quantifying those differences was the whole point - but they also vary from one font face to another, and can also vary within a given face.”

line-height: abnormal

On The Man in Blue:

Circtangles: A JavaScript art installation

For Firefox and Safari only, round corners with CSS border-radius.

On CSS :

• reset styles
• efficient conditional comments
• pagination styles

A series on Authentic Boredom :

“ Introducing “The Highly Extensible CSS Interface”, a four-part series of how-to's and savvy conversation to be published in the coming weeks, with the first article debuting this week. The phrase “highly extensible” is in reference to designing and coding interfaces that are flexible enough to adapt in ways the designer or developer may not foresee when handing off coded templates, while still retaining the overall aesthetic integrity of the layout.”

The Highly Extensible CSS Interface ~ The Series

An article on A List Apart:

“ Three techniques for incorporating data visualization into standards-based navigation patterns.”

Accessible Data Visualization

I found out about it a bit late :

Resetting Again

On James Whittaker's blog:

Em based layouts - Vertical rhythm calculator

“ Using CSS3 selectors as an alternative to hacks when targeting specific browsers. Hacks are an example of graceful degradation: you design for the most capable browser and then fix issues in legacy browsers. But what if we took the opposite approach and worked with progressive enhancement?”

CSS Not([hacks])

“ Posh CSS is a collection of Cascading Style Sheet Articles, Tutorials, Tips and Code snippets for the modern day web designer.”

Posh CSS found via shauninman.com

Also on Shaun Inman's site styling file inputs with css and the dom, which was posted on September 10th 2007 but I just read. Definitely worth having a reference to it.

An article on A List Apart:

How to Size Text in CSS

On Digital Web Magazine:

Web Design 101: Floats

On Mandarin Design:

CSS color overlay

An article on Sitepoint:

Nifty Navigation Using CSS

On A List Apart, how to create a scrolling, fixed/liquid hybrid layout without using JavaScript:

Conflicting Absolute Positions

On 456 Berea St. :

How to prevent HTML tables from becoming too wide

On Digital Web Magazine:

Web Design 101: Positioning

On A List Apart:

Multi-Column Layouts

A definite bookmark:

53 CSS techniques

On 456 Berea St. :

Styling form controls with CSS, revisited

An interesting article on Thinkvitamin by Molly Holzschlag:

the missing run-in value

The comments are also worth reading. The solution proposed by Jeff Croft, for example, is very nice.

On Friendly Bit:

• static and dynamic CSS
• finer details of floats

On Peterned weblog: table of contents
..table of content styles with different types of counting, right aligned page numbers and dotted lines filling the gap..

On Stuffandnonsense: CSS: a tribute to selectors
more links to articles on CSS 2.1 and CSS 3 selectors by 456 Berea St.

On Airbag: a ruler to debug stylesheets.

I have been trying to find the best solution to the
inline wrap IE6 bug for a year. Right now I have to write a post then see how it looks on IE and add a <br /> tag to avoid wrapping of the links with the consequent external link icon loss. The solution offered in the post above doesn't work for me because the CSS does not validate using display:inline-block. I hope this bug will be fixed in IE7..

On Vitamin: Stop Hacking, or be Stopped

I always try to avoid any hacks adapting the layout so as to avoid the different renderings of the browsers. That put some limitations on what I could do but now it pays off since I don't have to change anything.

CSS links:

• Float tutorial
• css-tweak

Typography and CSS on Digital Web Magazine

On 24 Ways css background images

On 456 Berea Street:

• CSS 2.1 selectors part 1
• CSS 2.1 selectors part 2
• CSS 2.1 selectors part 3
• CSS 3 selectors explained

CSS one layout :

Total Layout Flexibility: that is, the ability to order columns logically in the source while displaying them in any order desired. For any number of columns. Equal Height Columns: or more accurately, equal height columns without having to rely on faux columns. Vertical placement of elements across grids/columns: designers face the choice of relying on elements being a particular height, resorting to tables or simply not bothering.

Some of the things in this article I didn't know, some I wasn't sure about: CSS specificity

Some interesting articles on CSS techniques :

• CSS 3 multicolumn
• multi-column lists
• stylesheet maintainability

I use lists for the main menu of this site and, as I explain on the menu code page, I want the menu to appear as it does and the only way I know to position the links like that is to use four different unordered lists and float them .

I will read the multi-column lists article properly and see if it gives me a better solution.

Update- 2005/10/01 : I read the article and it does a different thing from what I want. Also, it is mostly an exercise in “taming” lists, as the ALA content warning specifies the article uses experimental techniques. I try to avoid excessive mark up and hacks as much as possible, sometimes I simply prefer to change the design instead of forcing it into realization.

CSS gradients, look at the source to see how it is done. In my opinion it requires way too many divs. But this is just a demo and the idea behind it is interesting.

“The Rising Tide” a scrolling effect tutorial on WestCiv

On A List Apart : printing high-resolution images.

From Dave Shea article on ALA titled:

• CSS Sprites: Image Slicing's Kiss of Death

about a CSS technique that makes use of the hover state to:

• Running With Sprites

by Bryan that extends it to use the active state.

To fully understand the cascade and inheritance of CSS is the most important prerequisite to achive a solid presentation. It also helps to avoid using “hacks” and workarounds as much as possible:

• W3C - Assigning property values, Cascading, and Inheritance

I agree with Alessandro of web-graphics.com on the topic of CSS hacks. I don't like to use them and I always try to work around them.This is the article, I have to say that the best solution would be to have browsers that render CSS properly..

Web-graphics has a couple of links to articles that offer tips on organizing CSS files:

• modular CSS
• CSS organization

I personally divide my CSS files in groups of rules and save them for quick consultation but I publish them optimized (no whitespace, each rule in one line) to keep them light.

Interesting article about clearing of floats on Mezzoblue.

This is the “old” way.