HTML5, JavaScript, and jQuery 24-Hour Trainer

Lesson 4

Introduction to CSS

The first three lessons of the book introduced you to a large number of tags, but it has so far not been possible to style the presentation of these tags when they appear onscreen. As ­mentioned, HTML5 has removed most of the remaining presentation-based tags and ­attributes, and presentation and style are instead the responsibility of another technology called Cascading Style Sheets (CSS).

The main reason for this is a concept called “separation of concerns.” The HTML markup language is responsible for providing the content of the page, while CSS is responsible for the presentation and styling of this content. This means it is possible to change either without affecting the other.

For instance, it is usually possible to completely restyle an existing web page without ­changing the HTML at all. Additionally, it is possible to change the content of a web page without ­needing to change the CSS at all.

This lesson will introduce the fundamentals of CSS, and will mainly focus on the way ­individual elements can be styled. In the next lesson, you will consolidate this knowledge, and also look at how CSS behaves when elements interact with one another.

The HTML5 specification includes a companion specification called CSS3—version 3 of Cascading Style Sheets—that greatly enhances the power of CSS. You will look in-depth at CSS3 later in the book, but for the next two lessons you will focus on the fundamentals of CSS.

Note

The capabilities of CSS are ...