As you progress in CSS, there are four important design principles that need to be kept constantly in mind. This succinct design philosophy will influence not only your page design but also the code you write.

Your design should be fluid whenever possible.

If the browser is resized, content should “flow” to fill the space. If your browser view is zoomed in and out, the content should do the same. This enables the widest range of users to enjoy your site, at whatever size, aspect ratio, and resolution they prefer.

This approach, known broadly as responsive or adaptive design means using relative CSS units rather than fixed ones: percentages and ems rather than pixels and centimetres. There will always be exceptions to this: it makes more sense to measure bitmapped images, such as JPEGs, in pixels, and often elements that relate to images need to be measured in pixels to match. But as a general rule, use ems and percentage measurements over static, fixed measurements.

“Pixel-perfect” design – trying to set every element to an exact position on a web page – is a mirage.

The browser window is not an A4 sheet of paper. A website user has the ability to scale content up and down, resize their browser, alter the CSS to suit their needs, block images, even turn CSS and / or JavaScript off entirely. A stylesheet is a pragmatic specification of how you would prefer the user to see your content, with the understanding that this is ultimately not under your control.

This drives many traditional designers crazy: “I want this exactly there. Why can’t I do that?” The answer is that HTML and CSS are not desktop publishing tools, and that web pages are not fixed, static productions, unlike the printed page.

Others, knowing just enough CSS to be dangerous, fall into using position: absolute for everything. In the words of Admiral Akbar: “It’s a trap!” Absolute positioning, while useful in certain limited circumstances, is to be avoided as a general design tool, for reasons discussed earlier.

Similarly, having content appear “exactly the same in every browser” is a pipe dream.

Styled content will look different from one browser to the next because of the different technologies and support for standards in each. By all means, you should attempt make your web pages appear approximately the same in most, and support the major browsers that your audience uses, and the recent versions thereof, with the understanding that work, effort and time will increase exponentially the older and more varied the browser support becomes. If a client wants the website to look exactly the same in Netscape 4 as it does in Safari 5, and have the latest bells and whistles, that becomes a real problem.

My personal philosophy is, at this time, to support IE10, Firefox 11, Safari 5, Opera 11, Chrome 14, and above. I will, grudgingly, work with IE8, but doing so significantly raises production time for many designs.

You will not always have a call on this. If your client has IE6 and does not wish to upgrade, and you take on the job, that’s what you have to work with. Saying “it looks fine at home” will not be an excuse.

Design with “graceful degradation” in mind.

Meaning: if you use new features of CSS, you are adding a visual aspect or feature that would be nice but not necessary for the user to experience. No visitor to your site should be denied your content because they lack the very latest version of a particular browser or plugin. They may not see it with all the “bells and whistles” added, but they should still see the content.

This same principle is also applicable to Flash and JavaScript on the web. Technologies should be used to enhance content, rather than the website relying on them.

This should, at the rational end, be applied to CSS in its entirety: can your website still be used if no CSS is applied at all? That is, after all, how search engines see your site: they index semantic content, not CSS. (The easiest way to answer this question is to turn off CSS in your browser's Web Developer toolbar and see how your website responds.)

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.