A while ago, I asked for CSS Suggestions.  Some of you may have noticed that I made the CSS Tutorials part of my website.  I have the last two of those suggestions ready to post tonight.  So far I have done, Floats – 2 Column layout, Box Model, Fonts (using ems and keeping them adjustable), and Centered Layout (how to compensate for IE’s stupidity).  The first two are a little simplified because they can get too complex to get anything out of it otherwise.

I’m looking for new suggestions though.  Would one on CSS buttons be good?  I don’t know.  If there are no suggestions, I’ll probably just let them all be.

Oh, also, if there are things that don’t make sense or are wrong in the current articles, please let me know.

The box model with browsers. Ah what a lovely topic. I hate it. Firefox and IE treat the box model in CSS completely polar opposite. In CSS there is width, padding, margin, and border. The meaning of width is a strange combination of those that changes from browser to browser. Let’s take a current design I’m working on. I want to have the content be 500px wide, but I want a 10px white space on either side of it. So in Firefox, I say padding: 10px; width: 500px;, because width means the actual width of the content. With IE though, I would need to say padding: 10px; width: 520px;, because the width actually means the width of the content PLUS the padding.

And yet, somehow, I find this intriguing and fun to sit here and duel it out with IE to get my CSS to work correctly.

First off, let me provide some resources:
1. CSS Zen Garden
2. OSWD – Open Source Web Design
3. CSS by The University of Iowa Web Technology Services

The CSS Zen Garden has the same html page, but with 840 different CSS designs. It is targetted towards graphic designers, but applies to coders as well. Picking apart their CSS can be very informative. Also listed is the book that I mentioned in my previous post. The book takes examples from all the designs and introduces key designing concepts that are applied to the design.

OSWD is something similar to the Zen Garden. It just has many designs under the Creative Commons license. This can be a good way to learn CSS as well.

And the last one is a plug for a page I wrote a while ago at a former job, but it has very basic stuff on it and some great resources at the bottom. It also has an image that helps explain spacing with css. You’ll run into problems with widths acting differently in IE and Firefox, but this image helps understand how it “should” work.

If you have never used CSS, I would start by making links have hovers. I would use internal CSS and change the a and a:hover selectors. See my old CSS stuff for some understanding of that.

Remember to start with the basics. I always start with my basic layout (1-3 columns) and then add my typography, then my padding and margins. The last thing I do is all the cool stuff. And I design for Firefox and fix it for IE when the whole design is complete. I’m not sure if that is good technique; it’s just what I do.

I want to break down CSS a little bit today and explain why you should use CSS.

“Why should I use CSS?”
Cause tables are evil! Ok, so maybe I should explain that as well. If you look at the source code for a web page (type Ctl + U in firefox) you will see what appears to be a bunch of weird stuff if you’re not familiar with html. On some websites, you will notice a lot of stuff though, including lots of table, tr, and td tags. This is usually unnecessary. CSS is used to replace all of this. This makes each page lighter and thus faster for a browser to download.

This leads right into the next point. Say you have 200 pages (or more) that use the same design. It can be very difficult to keep all of the pages in the same appearance and even more difficult to make changes. With CSS, all 200 pages can link to one CSS file that has standardized styles in it. This way, you can make changes to the 1 CSS file and see them across the entire site. Although, differences in each page appearance can still occur, it is easier to keep them standardized.

The main concept here is seperating structure from design. This is a concept that Dave Shea expresses well in The Zen of CSS Design. I highly recommend this book to anyone interested in web design. It has lessons on all sorts of topics within design; from layout to typography. Seperating structure and design has some wonderful advantages like accessibility and site bandwidth. With all these reasons though, the number one reason is cause tables are evil!

This is part 1 of 2 for CSS posts for today. Come back later today for “How do I learn CSS?”

I know many of us out there just pick up CSS at random and learn it so we can fix our blogs. Since I’ve been doing more web design and possibly will do more after graduation, I decided I wanted to really learn CSS. Saturday while at Barnes & Noble, Mark found the Zen of CSS Design and I picked it up. I’d read a lot about the book and how they intended it to be used, so I thought I’d just dig in. The first chapter alone taught me so much about how to approach the beginning of a website. I’ve been doing this all wrong for quite some time now. The first chapter has general information, but is very interesting. The following six chapters each have six designs in detail from the CSS Zen Garden. Each chapter focuses on one part of web design and also covers the subject of browser compatibility and 508 compatibility. I highly recommend this book if you are interested in learning more about CSS. You can buy it from Barnes & Noble.