CSS
When it comes to designing Web pages in a professional manner, there's the old way and the new way. CSS is the new way.
The old way is much messier and much harder to maintain over time. The old way is horrible for larger Web sites. Just ask anyone who ever tried to redesign a big site that used the old design methods.
Learn What a <div> Is
Get used to enclosing parts of your page within <div> tags. That's the ticket. Do you have navigation buttons? Put them in a <div>. Main text in a big block? Inside another <div>. A photo with a caption? Use a <div> to enclose them both together.
Then ... use CSS to style the divs. That is, write the rules for how that div should look.
Make sure to look at the Books page. The Holzschlag book is my No. 1 recommendation for learning CSS today.
My Favorite Tutorials and Examples
There's no way I am going to write a CSS tutorial. Many other people have already done so!
- CSS Zen Garden: These designs illustrate perfectly what CSS can do for your Web site. This site is not a tutorial, but looking at it should inspire you to embrace CSS and the "new way" of design for online media.
- A brief basic tutorial from the Web Design Group. Very short, just gives you a first look at what CSS is (selector + properties = rule). Painless. Takes two minutes.
- The CSS Box Model: An illustrated explanation of how to format chunks of your page in boxes (the real trick to learning CSS). When you understand this, you will really understand CSS. My best advice is that you need to reduce your page design (in your mind) to just a few boxes (maybe three or four boxes). Each box is a <div> -- and as I have already said, divs are the first-class ticket to the promised land of CSS.
- W3Schools: Look up anything about CSS selectors and properties. Great as a reference. (Less good for learning from square one.) If you are thinking, "Hm, I wonder how to make a dotted border around that paragraph?" -- this is the place for you.
- Web Page Reconstruction with CSS: This tutorial by Christopher Schmitt walks you through the process of converting an old-style HTML page to CSS. This is really excellent if you're willing to invest the time to work through it.
- Tutorials from Project Seven (PVII). The QuickDraw MacFly tutorial is especially useful. It will teach you how to think about laying out the page before you start -- so that your divs really make sense.
- Should You Use ID or Class? When you're ready to learn the difference, here it is.
- Layout Reservoir: If you want to learn how to make a two-column page layout or a three-column layout, or how to center your content on the page, this is for you (from Rob Chandanais).
- CSS layout techniques: I suggest you try the tips at the Layout Reservoir (above) first. Then move on to these (from Eric Costello). You will learn more and more as you experiment.
- Learning CSS: An absolutely comprehensive resource from Paul Scrivens, at the design blog Wisdump. You might like his list of links better than this one. (It's okay. I don't mind.) He picked different stuff. It's all good.
> See also (on this site) the pages about Color, Layout and Type.