Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In CSS3 First Look, staff author James Williamson provides an in-depth introduction to the newest CSS standard, detailing its modular format, history, and current level of browser support, while also demonstrating its capabilities and applications. The course includes tutorials on using new selectors, modifying typography and color, working with the box model, and understanding media queries. Exercise files accompany the course.
In the past, if we wanted to create multiple column text on our web pages, we've had to use some fairly clunky workarounds. CSS3 contains the multicolumn layout module that makes it easy to create multiple columns and give you several options for controlling the columns themselves. Currently support for multiple columns is not as good as some of the other features we have covered in this chapter and we are forced to deal with several vendor prefixes in order to get this technique to work. We'll go ahead and discuss support and the differences between browsers as we create multicolumn text for our legal page.
So here I have the legal.htm file open from the 04_07 resources directory. We'll also be using the main.css in the _CSS file, so if you're not using Dreamweaver or some other text editor, you want to go ahead and open that up as well. Okay, so what's going on here? Well, let me go ahead and preview this in Chrome and you can see that after every section we have this disclaimer with really long text, limit of liability was really long text, so forth and so on. This text is almost impossible to read. It's almost like it was in Latin or something.
So it would be really nice if this was in multiple columns. It might make it a little easier to read and maybe reducing the text size would be a little bit of a good idea here as well. So what I am going to do, first off, is determine where I want my columns. Now I could go ahead and make all individual paragraphs two columns, but that would be weird. That's kind of hard to read. I need the groups of paragraphs to be columns. I am going to surround them in div tags and use the div tag in order to help us. So here is what are going to do. I am going to go down in my code in the legal page to around line 27.
You can see here on line 28, we have our first heading three, which is a disclaimer. I am going to grab all of the other paragraph text inside this. Select all the way through say line 32, where we have our last paragraph before limit of liability, and then I am just going to wrap that in a div tag. So just no classes, no IDs, just go ahead and wrap that in a div tag. I need to do that for each section, so same for limit of liability. Now you will notice that the heading is not part of the div tag. We do not want our headings to be part of the two column text.
We want that to be single column. So again, I am going to wrap the section below it in a div tag and finally refund policy, I am going to go ahead and wrap all of that, all those paragraphs in a div tag as well. So it's going to wrap all of the paragraphs in div tags. Essentially the div tag is allowing us to sort of group this content together and it's going to make it a lot easier for us to make it multiple columns. I'll save this file and I am going to switchover to my main.css, and I am going to scroll down through my CSS to about line 402, so about line 402.
Now, I have a little comment about there, say on line 403 I guess, and it says multicolumn text rule goes here. Fair enough, and that's where I am going to put it. So the first thing I am going to do is just write a rule that targets all this div tags. I am going to type in #mainContent h3 + div. Now so we are using a sibling selector here that basically says, "Hey, whenever you find a div tag, it comes directly after an h3 tag, which is inside the mainContent, go ahead and do this." So again, we don't have to use classes.
We don't have to use IDs. We can use our structural selectors to help us out. All right, so inside this I am going to go ahead and create multiple columns. I do that through the use of a couple of different vendor prefixes. I will go ahead and do Mozilla's first. moz. Just because we've been doing WebKit first, and I don't want Mozilla to feel left out, and the actual property name is column-count, column counts. We are going to do two columns and we'll do the same thing for WebKit. So, webkit-column-count.
Again, we are going to do two columns. So it's kind of nice. You can specify exactly how many columns you want. Now we'll go ahead and provide the non- prefixed code, just in case WebKit or Firefox drops the need for the prefix, we'll have that code there and eventually we can get rid of the prefixes. We are also going to do a text-align: justify. Since they are going to be in two columns, we'll make them really tight by justifying it, and we'll take the font-size down a little bit to 85% inside this div tag. So I am going to go ahead and save that and test this in a couple of browsers.
I will start by testing it in Chrome. Cool! There is our two column text, very lovely. Let's test that in Firefox to make sure it's working there as well. It is. Awesome. Now, maybe not as readable as we would like. To be sure we would like a little bit more of a gutter between them there. That would be nice. Other than that though, it's starting to look pretty nice, and I would also like to have a little bit more control over the width of the column. Well, we do have control over the width of the column, but it's probably not the level of control that you are going to want. Let me show you what I mean.
Let's go back into our selector here and directly underneath the column-count I am going to type in -moz-column-width. So we do have a property called column-width. Let me go ahead and set that initially to 300 pixels. Do the same thing for WebKit. So webKit-column-width, 300 pixels. Okay, cool. If you don't specify the width of the column, obviously what it's going to do is it's going to take a look at the available space and split them up evenly. Now I would love to tell you that this is going to give you the capability to do unbalanced columns, but it's not.
Let me show you what it does. So if I preview this in Chrome, you can see I am back to having a single column worth of text. What's up with that? The same thing for Fire. Let's try that... No. So instead of basically allocating 300 pixels for the first column and then whatever is left over, the second column gets that. Both browsers are looking at it, saying, "You know what? I do not have enough space to fit 200-300 pixel columns." So what you get is one column. Well, okay. So what if you go down in value? Let's check that out. Maybe I am going to go down to 200 pixels in both of them. Save that and test it.
Oh! So now again, instead of making a small first column and letting the second one sort of stretch, what you get is you get two exactly 200 pixel column. So unfortunately, that one value is not going to give you unbalanced columns. So for what we are doing, we really don't need those column-widths. I am just going to go ahead and get rid of those guys. I would like our column gap should be a little bit wider, maybe a little bit easier to read, and that is something that I do have control over. So in the space where my column-widths used to be, I am going to add Mozilla. moz-column-gap.
I am going to go ahead and set the initial value to 30 pixels. I'll do the same thing for WebKit. webkit-column-gap: 30 pixels. Right, if I save this and preview this in my browser, you can see that I have a much wider gap now. It is exactly 30 pixels. You don't have to stick with pixels. You can use relative units of measurement. As a matter of fact I am going to go back and do about 2 ems worth of column-gap. The 2 ems is typically going to work out to our 32 pixels, because the average browser size is 16 pixels, in terms of its text.
So if I preview, that's about the same, maybe a couple of pixels bigger, but that certainly is a a little bit easier to read for us. Now another thing that I want to point out, we have one more feature that we can use for our columns and that is a column rule. Column rules are basically lines that get added inside the gutter and in certain cases they can aid readability of the text. They are not always going to be what you need, but you should at least know how to do them. So in case you need one later on for your project, you know how to them. Okay, so we'll do them in Mozilla first. So -moz-column-rule-style.
Now here we are just going to do solid. After that we are going to do moz-column-rule-color. Color I am going to use is #999. So it's just sort of a gray color and then -moz-column-rule-width. So it's just like specifying a border and here we are just going to do 1 pixel. All right, since I don't feel like typing all that again, I am going to copy it, paste it, and change the moz to webkit, because I am smart like that.
If you enjoy typing, feel free to do that yourself. So I am going to save this, preview it in Chrome, and you can see that we have a cool little rule for all of our columns. And one of the things that's helpful for these is in these longer columns, they help you know where the column is ending. This hasn't ended it. So I just keep going down until I sort of find that end. So, they can be decorative or they can also be functional as well, and it is up to you as to whether you want to try them. Now if I go into Firefox and view that, notice that it displays a rule almost the same way.
Now Firefox didn't used to support that rule. WebKit has been supporting it a lot longer than Firefox. So older versions of Firefox, you may not see that rule if you try the same syntax. While the current capabilities of multiple column text might not be exactly where you'd like it, like me you might want a little bit more control over it, it still gives us another really powerful tool in controlling the typography within our sites. The lack of support in Opera and Internet Explorer, because neither of them supports multiple columns, makes it more of an enhancement capability rather than a layout tool, and you should always keep text readability in mind when considering its use. Multiple column text, for example, spanning the entire page, not a good idea.
The thing that I'm most looking forward to is having the ability to create multiple columns when I need them without having to add a lot of extra markup or complicated styling hack. So as support for this increases, I'll probably be using it a lot more in my own projects.
Find answers to the most frequently asked questions about CSS3 First Look.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.