CSS 3.

0: Columns with CSS
Transcript
Previously creating Columns in a web browser used to take a great deal of effort. However, now with CSS3’s new column’s feature, we can create nice even columns in just about any text element. Let’s take a look at the code. To demonstrate the use of columns in CSS3, I've already put some content on the page, I'm actually going to put a little more content on the page, by just copying and repeating these two paragraph tags. We can see what this looks like currently in the browser with FireFox and you can see the unstyled content doesn’t look very interesting at all. And as you stretch it across the page like this, it gets harder and harder to read. So we're going to go ahead and create columns. The way we'll do so is inside the style tags. So in the div, which I'll use as a selector, we're going to have to target our column count style rule first at Mozilla and we're going to use column-count and we'll use 3 that’s for FireFox. For webkit browsers, which is the Safari and Chrome, we’ll also use webkit-column-count and then finally for other browsers that may support column count, we'll just do it without any type of prefix. So now that we've done that we can take a look at this again in FireFox and now we have three nice columns. If we limit the width of the div, let’s say we limit the width of the div to 400 pixels and make the fontsize .85em; we can see that our columns will adjust accordingly. So there we've got the column count, we can also specify the column gap, so again we're going to have to target our specific browsers moz-column-gap and let’s say we want a 40 pixel gap. Again we'll target webkit with 40 pixels and finally untarget it. We'll also set it to, and now we can see the difference, you see a lot more space. Now if we set it tighter let’s set it to 10 pixels, just like that and now you’ll see that gutter space becomes a lot more tight. We can also put rules or lines between columns, sometimes that’s need to visually separate the columns a little bit better. So I'm going to also add to this, the style moz-column-rule and now we set the width of the rule we wanted on the outset and the color, we'll use a grey. And then of course we'll have to do it again for webkit, 1 pixel outset, grey and finally we'll do it without any type of prefix for other browsers. So 1 pixel outset and grey. And now we'll get a nice rule between each column, you can see it right there. So before CSS3 this was incredibly difficult to do, but you can see with CSS3 it becomes very, very easy to create your content in columns.

1