A really nice video by Matthew Buchanan about his process of building a website. Very interesting to see the different styles gradually applied in the process.

I first considered using a TextMate macro to do the heavy lifting with regard to the CSS file, but my friend and colleague offered a much better solution: the contents of stylesheets are exposed in the DOM, so JavaScript could probably be used to apply the CSS rules in sequence, and the result recorded with screencasting software.

If you want to make your own video Matthew gives a script to do it on his blog:

http://matthewbuchanan.name/post/33504871/timelapse-css

The CSS float property is certainly one of the most obscure when you begin with CSS. As tricky as you may find it it is also one of the most powerful method of positioning.

First try to understand the concept of “flow” in a page. The normal flow of the page is from the top to the bottom. Each element have their own space and can’t overlap each other. Block element are displayed in columns and inline element in lines.

(more…)

The outline property in CSS is more or less unknown. The first reason I think is because it only supported on Gecko based browser, even if it is part on the CSS 2 specifications. But you know standards…

It is a shame because it is an interesting property.

What outline does:

It is a bit like border, you specify a width, a style and a color. The shortcut is :

outline: width style color; (more…)

Who has never spend hours stuck on a design issue? Even if CSS is a very powerful and flexible language you can always face a situation where you don’t know what to do.

Here are some tips I use when I am stuck on a CSS problem: (more…)

It is not a secret it is a fact. Structure your code will always be useful. If you work in a team or if you often re-open old projects you will see that having a well structured file decrease considerably the effort needed to maintain and understand the document.

(more…)

In the wonderful world of CSS you can use different selector to locate the element you want. Some of them even allow you to filter the element by a certain property. In this example we will use the “href” attribute of the “a” tag to add an image in function of the file type linked.

In other words, if I have a link to a psd file, it will automatically add a little psd icon in front of the link. All of this is done in CSS using selectors.

(more…)