Lesson Overview

In this lesson you'll begin to learn CSS: you'll learn how CSS works, how we use it, and why we use it. We're also going to review the typical web site structure.

Pre-Requisites

Before starting these tutorials, you should have a good understanding of HTML. If you haven't learned HTML yet or need to review, you can go through my Fundamentals of HTML course.

What is CSS?

CSS stands for Cascading Style Sheets. A style sheet is a file that sets the values of properties for a document's appearance, including properties for colours, fonts, borders, spacing, and layout. The "cascade" refers to how various styling rules are applied to selections of elements and how they override each other. For example, you could define all <h1> elements to have green text, and then later in your style sheet you could add a rule that says "all <h1> elements inside <article> elements must have purple text, instead". So all <h1> would have green text unless they're inside an <article>, in which case they'd have purple text. This kind of cascading behaviour allows you to easily format elements not just on a single HTML page, but on several pages without any extra code.

CSS is a set of properties and values that allow you to customize the appearance of a web document. Where HTML defines the CONTENT of the document or application, CSS defines the style of the document or application.

CSS History

CSS was first developed to separate presentation from content. In other words, to separate the colours/fonts/layouts of a document from the HTML markup and content of a page. This made it easier to update the styles or content of a document. In particular, it allowed developers to create a set of styles and apply them to several pages in a web site. Before CSS, styling was coded right into the HTML and content of the page, so it was a cumbersome process to update colours, fonts, and layouts: you had to find the styling information buried in the HTML content on every single page and edit it manually.

CSS 1 became available in 1996 and allowed developers to style colours, fonts, backgrounds of pages, and various text attributes such as letter/word/line spacing, and alignment. CSS 1 also defined what we now refer to as the "box model", which is a set of properties that defines borders, margins, and padding of elements. Browsers weren't really up to speed on CSS yet, so sometimes things displayed unpredictably: a page might look one way in BrowserA, and differently in BrowserB.

CSS 2, in 1998, allowed developers to define the layout of web pages with positioning properties. It also contained additional media types for things like audio and video, and more complex ways of selecting elements to style. For example, instead of styling all of the <div> elements the same way, you could style some <div> elements one way and certain other <div> elements a different way.

CSS 3 was published in 1999 and included properties that allowed you to build web sites that looked like slide presentations. This included transformations - properties that allowed you to animate elements and change their appearance using things like rotation. The CSS 3 standard also introduced "modules" to organize the various CSS properties, such as "Selectors" and "Box Model". This allows a specific module to progress in its development faster or slower than other modules, and even allows for the development or invention of new modules without having to update the entire CSS specification.

CSS 4 and above probably isn't ever going to exist. Since CSS 3 divided everything into modules, this has allowed individual modules to grow on their own. For example, the Background & Borders module has grown and improved into what you might think of as part of CSS 4 - it has had many improvements and updates that have gone beyond what was originally part of CSS 3. But because CSS 3 modules can each improve and progress independently at their own rates of speed, it means that the entire CSS 3 specification doesn't need to be re-written. So there will probably never be a "CSS 4" or anything higher.

Therefore, there is no defined number for the current version of CSS. The CSS standards are maintained by the World Wide Web Consortium's CSS Working Group.

You can access the current standards for CSS at the CSS Home Page under "Standards and Drafts".

Cascading

Recall that CSS stands for "Cascading Style Sheets". The "Cascading" part is an important part of how CSS works, which is part of specificity. When you define styles for an entire web site, you can override some of those styles for a specific document. You can even override those document styles for a specific area of the page. The most specific styling rules will always override the more general ones, and the styling rules defined most recently will always override the ones defined earlier. This will become more apparent as you learn how to code CSS rules.

What Can CSS Do?