How CSS works

CSS is interpreted by the browser (the application used to view the webpage, e.g. Internet Explorer or Google Chrome) and then used to decide how the webpage should look. This also means that while there is a very thorough specification of the CSS language, the many browsers across all of the possible devices (desktop computers, tablets, mobile phones etc.) interprets your CSS code in its own way. This means that even though most of your work will likely look and act the way you expect it to, there might be subtle differences if you view your work in some of the many browsers on the market.

Since CSS is just a specification and not a law, browser vendors are free to add their own CSS properties, allowing you to perform more advanced things, but only in that particular browser. This is frequently used by the various vendors to try to persuade W3 (the organization in charge of many Internet related specifications, including HTML and CSS) into adding functionality to the next version of the CSS specification.

Historically, the problem with rendering differences across browsers have been a larger problem than it currently is. Especially Microsoft has had problems following the specification with their Internet Explorer, with version 6 being the worst example of this - competing browsers were following the specification way better, but because of market shares, developers had to implement several nasty workarounds to fully support IE6 and its many quirks. Fortunately for developers all over the world, Microsoft has done a lot to remedy these problems in later versions of Internet Explorer.

However, you will still run into differences in rendering, especially when you test across different browsers on different devices and operating systems. Your webpage might not look entirely the same in Internet Explorer as it does in Chrome, and there might even be differences when looking at it in Chrome on a PC with Linux, OSX or Linux. For that reason, always test your webpage in as many browsers as possible and make sure that your CSS validates (more on that later).

Summary

CSS is interpreted by the client (usually a webbrowser) on each request, and since different browsers uses different parsing engines, things might not look entirely the same across different devices, platforms and browser versions. Make sure that you test all of your pages in as many browsers as possible and to help reduce the amount of problems you should make sure that your CSS code can pass the checks of the W3 validator.

In this tutorial we will only be discussing properties and techniques which can currently be used in the most recent versions of the most popular browsers: Microsoft Internet Explorer, Google Chrome, Mozilla Firefox and Apple Safari. However, the fact that these properties and techniques are understood by the browsers still doesn't mean that they are interpreted AND used in the exact same way, so always remember the golden rule of CSS: Test your work as much as possible!