How to Use CSS for Better Web Design
Advertisement
Learning CSS is an integral part of web design these days. It lets you do some really cool stuff. But I'm not here to tell you how great CSS is, but to get you using it when building a website. So let's get started, shall we?
I have compiled a list of the best CSS resources and how-tos that I have seen. It starts with some general resources and moves to specific tutorials on common techniques. If you want to learn CSS for free, these are the sites to read:
CSS Basics
This site by the W3C is the resource for all things web design. Start out at the main CSS Tutorial page and go from there. Click here to visit the site >
PMOB
That name doesn't say a whole lot, but trust me, the site does! Check it out for great CSS lessons and sample layouts (including a great 3-column layout.) Click here to visit the site >
Glish
Another great CSS resource. Click here to visit the site >
Quirks Mode
Quirks mode is just one of the things you have to deal with in IE. You'll need special hacks to make your layouts look perfect in all browsers, and this is the best place to learn. Click here to visit the site >
CSS Discuss
A place to discuss CSS with a ton of other people who can help. Just be sure to read their policies before jumping in. Click here to visit the site >
Free CSS Templates
One great way to learn is to review other websites by looking at their source code and CSS files. Here is a collection of free templates that are great for research and even using, as-is, for your site. Click here to visit the site >
Sliding Doors Technique
Thanks to CSS, we can do rounded corners for tabbed navigation menus without making a bunch of separate images. Learn how in this article at A List Apart. Click here to visit the site >
Box Lessons
This is an old article, but it has some basic layout help so that you can avoid table-based layouts. Just click a layout and it will give you the code for it. Just remember that the code is a bit old (it uses IE5 hacks when you really need IE6 hacks these days!) Click here to visit the site >
CSS Tab Designer
An extremely easy way to create your navigation menus. Just download this free software. (It even comes with sample menus.) Click here to visit the site >
Min-height and Min-width
Setting minimum height for boxes can be tricky sometimes. This tutorial is short but useful. Minimum width is a bit more complicated, but it has more options for better layouts. Click here for min height > and here for min width >
CSS Library (templates and nav menus)
The CSS library by Dynamic Drive is full of sophisticated CSS based menus. Click here to visit the site >
Faux Columns
Ever have trouble getting your sidebar length to match your main content length? The best trick is to use "faux columns." Click here to visit the site >
Getting the Footer at the Bottom of the Page
Sometimes your site will have pages with different lengths. Some will be shorter than the browser height, but you still want the footer to be at the bottom of the page. I mean, it would look weird with your footer halfway down the page! So, here is some advanced reading material to get your footer to "stick" at the bottom of the page or browser window, whichever is lowest. Click here to visit the site >