One more must read article if you want to work with css fine from snook.ca, you will know what exact define a css layout and then you will easily work with it becoz you had understood what it is and what you can use to control it.

Box Model

At the very core of it, is an understanding of the box model within CSS. Sure, you may know your margin and padding but what happens when elements start to interact with each other. Suddenly things that look good in one browser go all to hell in the other. Consistently in working with the box model comes from understanding the difference between quirks mode and strict mode. It’s also a good idea to know how to hack it up for older browsers.

Floated Columns

While absolute positioning was one of the first approaches that people took when attempting to replace table-based layouts, it was floating content that opened the doors of possibility. Along with learning how to float, you must also learn how to clear floats so that content that follows or backgrounds will appear correctly.

Sizing Using Ems

There are two different issues at play here when it comes to sizing with ems: fonts and layouts.

With fonts, Internet Explorer 6 and lower don’t allow you to resize the text when specified using pixels (px). Those with vision issues may wish to set their font size larger in order to more readily read what you’ve written. Specifying your font sizes using ems has proven to be the popular approach to this problem. The importance of sizing text using ems is waning as users move on to better browsers.

Sizing layouts with ems can also offer up a whole other avenue of flexibility. When playing with text size, it can often throw an entire design out of whack. Styling elements using ems allow the containers of content to grow along with the text, maintaining the consistency of the design.

Image Replacement

Boring text elements dont’ excite us. We want to use lots of graphical flair along with gradients and glass effects. And we want to use custom fonts; fonts that browsers just can’t offer us yet. Image replacement techniques allow us to replace the existing content-rich and SEO-friendly text with stylish images or Flash files with embedded fonts.

Floated Navigation

If you’ve mastered floating columns, the other tricky piece to the puzzle and one that is heavily used, is floated navigation. The web-standards-lovin’ folk love their unordered lists of navigation and there are a myriad of ways to style them up.

Sprites

Like video games of yore, packing multiple images into one single image has become a popular technique to solve a couple problems. The first is CSS-based rollovers. More recently, it’s been proven to be advantageous to combine multiple images — in particular background images used in image replacement techniques — into a single file. This reduces the number of requests your browser has to make, improving the time required to download all files from your server.

What do you got?

Of course, there’s always more to learn and if you think there’s a technique that you think is especially important for the beginner, be sure to add it to the comments.

Source: snook.ca