Spelchan.com Logo

From Scratch Web Games: A Beginners Guide to Game Development using HTML, CSS, and JavaScript

Chapter 3.2: What is CSS

For the history of CSS, we again start at CERN. Håkon Wium Lie noticed that while HTML was being used as a publishing program, there was no way to style the documents. Separating the style from the document structure was one of the goals of HTML, but the responsibility of styling the document was left to the browser which had two major issues. First, different browsers would style things differently. Second, the author of the document did not have control over how the document would look. The second point was a very common complaint as other text processing systems of the time did give authors control of the style. Many researchers were used to using TeX or LaTeX for the preparation of articles. TeX has incredible control over styling so the lack of style in HTML was a legitimate complaint.

Most browsers of the time had very limited control over the style, but Pei Wei had developed a browser called Viola that had a proprietary style sheet language as one of its features. Håkon realized that there needed to be a standard for style sheets so he published a draft of the Cascading HTML style sheets proposal shortly before a large HTML conference in Chicago in November 1994. Several other style languages were also proposed, including the Viola language. While there was a lot of discussion at the conference, many believed that CSS was too simple of a solution as it was just a simple declarative format. Many participants felt a full programming language was required.

The next HTML conference, in April 1995 went over better, as Håkon worked with Bert Bos on implementing CSS within the Argo browser. There was enough interest that in May 1995, the www-style mailing list was created with the purpose of discussing the development of CSS. The formation of W3C happened later that year and the W3C formed a workshop for style sheets with Håkon and Bert being two of the members of the technical staff. By the end of 1995 the W3C had set up the HTML Editorial Review Board to ratify future HTML specifications with CSS being one of the working items. CSS level 1 was recommended in December 1996.

Microsoft was the first commercial browser to support CSS in their Internet Explorer 3 browser, which was released in August 1996. Unfortunately, as CSS1 was not ratified, the specifications changed after the launch of IE. It was still able to support most of the properties but did not foresee the box model. Netscape Navigator 4 followed, but Netscape was skeptical towards style sheets, so it’s CSS support was poor and was more of an attempt at matching IE features. Dave Shea was a big supporter of CSS and created the CSS Zen garden (https://www.csszengarden.com/).

CSS got its own working group in February 1997 for working on the CSS level 2 specifications which was released in May 1998. CSS3 was released in 1999, though unlike CSS2, it is broken into several different modules representing different parts of the specification. For more information about the history of CSS, see https://www.w3.org/Style/CSS20/history.html.

Chapter contents

Chapter 3 Contents

3.1 CSS Basics Cheat Sheet

A cheat sheet covering the basics of CSS.

3.2 What is CSS

A brief look at what CSS is and how it came to be.

3.3 Setting up Style Sheets

A look at the three different ways to add style to your document.

3.4 Blocks, Spans, and Selectors

Setting the style for different types of elements.

3.5 Classes

An easy way of having multiple styles on the same element type and across different elements.

3.6 Colours

The use of named colors, the RGB color model, and creating RGB colors.

3.7 Hexadecimal color codes

Using hexadecimal color codes and other color models.

3.8 Fonts

Controlling what text looks like.

3.9 Box Model

The box model controls how elements are positioned within their layout box.

3.10 Link styles

Anchor element states and turning a link into a button.

Christmas Bonus

Hunt the Santa logo
A total conversion of Hunt the Webbus with a Christmas Theme.

3.11 Styling lists

Lists can have style applied to their layout, placement, and bullet.

3.12 Styling tables

Tables have a grid as well as rows and columns that can be controlled.

3.13 Webbus project

The project for this chapter is a variation of a classic text game

3.14 Webbus solution

My solution for the Webbus project

3.15 Christmas Total Conversion

Converting the Webbus game into a Christmas game.

← previous section
CSS Basics Cheat Sheet
next section →
Setting up Style Sheets
Table of Contents