Before Cascading Style Sheets (CSS) there was very little that could be done to change the design of a web page. While Hyper Text Markup Language (HTML) creates documents for the World Wide Web, it was specifically designed to hold the content of a web page. Housed in a separate file, CSS adds the style and design to a web page. The term cascading comes from the ability to combine multiple CSS files to determine the style for one page.
As more people started using HTML, the demand grew for more design capabilities, which would allow developers to control how web documents looked. But browsers offered limited capabilities for styling. In 1993 NCSA Mosaic was released, making the web more popular than ever, but it only offered limited capability to change fonts and colors.
In October 1994, Tim Berners-Lee formed the World Wide Web Consortium, (W3C) at the Massachusetts Institute of Technology Laboratory for Computer Science. The W3C has members that are government entities, businesses, educational institutions and individuals. The W3C creates recommendations that are used to keep the web experience consistent among different browsers.
Hakon Wium Lie released the first draft of “Cascading HTML Style Sheets” in October 1994. Brent Bos was also building Argo, a browser that had style sheets which could be used by other markup languages. In all, nine different style sheet proposals were submitted. The discussions on the www-style mailing list, which was created in May 1995, influenced the development of CSS. Because it was important to be able to use the style sheets for other markup languages, HTML was removed from the name. The W3C set up the HTML Editorial Review Board (ERB) in late 1995 to make HTML specifications.
Although it took 3 years for any browser to come close to fully implementing CSS, August 1996 Microsoft Internet Explorer became the first browser to support CSS. Netscape followed suit in supporting CSS, but also implemented an alternative Javascript Style Sheets, which were never fully completed, and are now deprecated. To this day, there are differences in the way CSS is implemented in different browsers, leading developers to use hacks to make web pages look consistent in different browsers.
The CSS Level 1 W3C Recommendation was made in December 1996. The release of CSS 1 supported: font properties, text attributes, alignment of text, tables, images and more, colors of text and backgrounds, spacing of words, letters and lines, margins, borders, padding and positioning, and unique identification and classification of groups of attributes. It was after this release that the Cascading Style Sheets and Formatting Properties Working Group was formed by the W3C to focus solely on CSS.
In May of 1998, the W3C released CSS 2 which added new capabilities including z-index, media types, bidirectional text, absolute, relative and fixed positioning, and support for aural style sheets. Not long after the release of CSS 2, a new browser, Opera was released which also supported CSS. It wasn’t until June 2011 that W3C released CSS 2.1, which fixed errors and aligned the capabilities better with browser functions.
With the release of CSS 3, capabilities were broken into modules. Between June 2011 and June 2012, the following four modules were released as formal recommendations: color, selectors level 3, namespaces and media queries. More modules are have reached the working draft or candidate recommendation phase of release and are considered stable.
Because level 3 was separated into modules, there will be no single CSS 4 release. Some level 4 modules which build on level 3 functions have released. New functionality has been added in other modules. Modules will continue to be released to continue to add and update features.
Although there are some limitations, CSS has added functionality and design to web pages which were once simple documents. The advantages of CSS include content and presentation being in separate files, consistency of format throughout a site, reduction of bandwidth, accessibility, the ability to easily change the style of a site, and the ability to change the design of a web page for different devices. If you take a moment to imagine a website where the only design features are font and color changes, you will recognize that CSS has contributed greatly to the popularity, ease of use and accessibility of the internet.
Why do we need CSS?
Firstly, using CSS ensures that your web pages are consistent. Imagine a website with 100s of pages, now imagine having to input the code to define heading sizes, layout and other display data and mix that all in with the content each time you wanted to produce a new page. Also, imagine having a site with 100s of pages and being able to change just one of them while keeping all the rest the same – CSS also makes that a possibility. Using CSS delivers consistency where it is needed but is flexible enough to enable you to make changes to individual pages or sections.
Using CSS allows a user to specify;
- Fonts
- Colour of text and links
- Use colours in the text’s background
- Where and how boxes within the content look and are placed
- And…CSS also improves user accessibility, efficiency, flexibility and ensures browser compatibility.
What is the difference between CSS1, CSS2 and CSS3?
CSS (1996) allows the user to select font style and size and change the colour of the text and background.
CSS2 (1998) has capabilities that allows the user to design page layout.
CSS3 (1999) allows the user to create presentations from documents and to select from a wider range of fonts including those from Google and Typecast. Uniquely, CSS3 allows the user to incorporate rounded borders and use multiple columns. CSS3 is considered to be easier to use (when compared to CSS2) because it has different modules
What about CSS4?
The Working Group of W3C (w3.org), the group who discuss all technical aspects of CSS’s progression and answers queries from a public mailing list, are continuously working on improvements within CSS. Rather than creating an entirely new version called CSS4 it seems that the w3.org are adding new, smaller components to the existing CSS versions via extensions. But before we ask where CSS4 is, it’s worth noting that many argue that CSS3 doesn’t exist. Instead, CSS 3 and 4 are rather terms used to define any updates that happened after CSS2 (and are, therefore, officially called CSS2.1). In these terms, CSS4 has happened but it will never be called CSS4.
Of course, the limits to CSS’s capabilities are endless, hence they are continually developing. CSS-Tricks, a site that covers stories about the development of CSS amongst others, regularly encourages its readers to expand and experiment with CSS. For instance, one story reveals the fun/useful things to try with the Universal (*) selector. For instance, using a border-box on web pages or transitions to pimp a WordPress site.
How do you learn CSS?
As much as CSS is a practical tool for web developers it is a language and therefore, something that people can learn, much like learning to speak French or Japanese. Rather than having to learn every single piece of code by heart, it’s possible to look up properties using a CSS reference site.
Finally, where would we be without CSS?
In short, we’d be using a very basic looking web. The web as we know it today couldn’t exist without CSS. An analogy commonly used is of building a house. While you could build a home only using beige bricks (HTML) it would have no features whatsoever. So, you could forget about colour on the walls, decoration, interesting architecture and visual effects. The web would be ‘vanilla’ and not the colourful, revolutionary and stimulating medium that we currently enjoy.