8    Introduction to Cascading Style Sheets

In this first chapter on Cascading Style Sheets (CSS), I’ll explain what CSS is exactly, as well as the principle of applying CSS based on some simple examples.

In Figure 8.1, you can see a simple basic diagram showing the components that make up a simple and ordinary modern website. Above all, the content is simple. To prepare this content for the web, you can use HTML, which gives the content a semantic meaning by means of HTML elements. In addition, you can use other media files such as images or videos, which are also embedded in the HTML document. Furthermore, more and more often, you can find various scripts for special actions. Finally, the particular focus of this figure and of the entire chapter, is the stylesheet. Taken together, all these basic components form a simple but modern website that gets displayed in a web browser.

Figure 8.1     The Basic Composition of the Components of a Simple Website

The predominant role of CSS (or stylesheets) in creating websites is the appearance. With CSS, you can create rules for how the content of an HTML element should be displayed. At this point, it pays off to have semantically meaningful notations of the individual HTML elements in the HTML document.

CSS supports the separation of a document’s structure and design. Ideally, the presenting aspects should be completely separated from the content of the website, which means the following:

• HTML defines the meaning or semantics of the content.

• CSS defines the presentation of the content.

Without HTML, the content can’t be used by web browsers, and without CSS, the content is less beautiful.

In this introductory chapter to CSS, I’ll cover the following topics:

• The history of CSS

• The principle by which CSS works in practice

• The options involved in using CSS in an HTML document

1. The first version with CSS level 1
   In the early days, there were several similar approaches besides what is now known as CSS, but the inventors of the original CSS, Håkon Wium Lie and Bert Bos, were the first to make the idea public. They were just in the right place at the right time. In 1995, the W3C became aware of CSS during a presentation, and at the end of 1996, the CSS Level 1 Recommendation was published. The first version was mainly about the design of fonts and color.

2. The second version with CSS level 2
   The next version was released in 1998. Because there were some inconsistencies and CSS Level 2 often caused problems when used on the web due to different web browsers implementing many things incompletely or incorrectly, this version was revised in 2002 with an intermediate version—CSS Level 2 Revision 1—in which some of these defects were fixed or deleted. It took until 2011 before CSS 2.1 was published as a Recommendation. This new version included the positioning of elements.

3. CSS3
   The third version of CSS has been in the works since 2000. Unlike the Level 2 version, they no longer used a single specification, but instead used CSS3 to split the various features into different modules. Each module adds new capabilities and extends the features defined in CSS 2.1 with it—keeping everything backward compatible.