Color gradients are frequently used on web pages so let's go through the basics.
The two CSS features we will use here are regular background images and CSS gradients.
Background images are pretty reliable but some surfers might turn off images to
save on bandwidth (due to cost or slow connection) and CSS gradients are only
supported by newer web browsers so we need a fallback solution in both cases, background-color.
We will use a two-color, vertical gradient. With background images, the fallback
background-color should match the top or the bottom of the gradient image so that
if the image doesn't cover its element we will get a smooth transition. Pick the
top or bottom color (and adjust background-position accordingly) so that you get
the best contrast between text and background-color.
As you develop your website you might find that some of your CSS selectors will contain so a lot of declarations. So when you need to adjust your padding it can take multiple seconds to spot your padding declaration inside a selector with 20-30 declarations. Sure, you can search, but that takes more operations and keystrokes (position marker at selector, type search command (ctrl-f), type first few letters of declaration, press enter) and shouldn't really be necessary.
A setup I like for multiple column layout is to float each column to the left and use margin-right to create space between the columns. And then set margin right on the last two to zero and float the last one to the right. This technique leaves an area of absolutely nothing (not even margin or padding) between the two last columns so it takes more than a minor calculation error to make your layout fall apart. The same code can also be used for multi column grids, f.ex. displaying 12 products in a 4*3 grid.
The CSS code needed for this is conceptually as follows.