CSS, short for Cascading Style Sheets, is the primary language used to describe look and formatting for webpages across the Internet and documents of markup (e.g. HTML and XML) in general. If you want to work with designing your own webpages, you need to be able to understand and write CSS. Lucky for you, you've come to the right place, because in this tutorial, you will be able to learn pretty much anything there is to know about CSS, from the most basic stuff about syntax and simple properties, to more advanced examples.
What is CSS?
CSS is short for Cascading Style Sheets and is the primary language used to describe look and formatting for webpages across the Internet and documents of markup (e.g. HTML and XML) in general.
A markup language like HTML was initially designed to provide information about formatting and looks itself, but it soon became clear that it would make much more sense to split this into two layers: Document Content and Document Presentation, with CSS fulfilling the task of the latter. Historically that is why HTML has tags like font, which sole purpose is to adjust font family, color and size locally, a job that is today handled by CSS. This allows the developer to re-use formatting rules across several places in the same document and even across multiple documents. Here's an example to prove my point, and don't worry if it's not entirely clear to you what it does.
The Anatomy of a CSS Rule
So, in the previous chapter, we used the classic "Hello, world!" example to get a glimpse of just how easy it is to style an HTML element with CSS. But why did it look the way it did? In this chapter, we'll focus on the anatomy and syntax of CSS, to get a deeper understanding of how it works. Let's have a look at the previously mentioned example again, where we had a CSS rule which targeted H1 elements:
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).