DEV Community

Emmanuel Kenneth
Emmanuel Kenneth

Posted on

The Evolution of CSS

Over the years CSS goes through major changes which leads to the implementation of new features which Frontend web developers make use of to beautify websites.
Now before we go into the topic let's first take a look at what CSS is and what it does in the web browser.
CSS(Cascading StyleSheet) is a StyleSheet document used to describe the presentation of a document written in HTML or XML. It describes how elements should be rendered on a web page and on different screens through the use of media queries.
Now let's go into today's topic;
CSS gets new features added over the years by W3C specification, Each of the levels of CSS builds upon the last by adding more options to developers to describe how a HTML element should be rendered on a web page.
This CSS with new features added is called a new level, and as of now we have four levels of CSS which are

  1. CSS level 1
  2. CSS level 2
  3. CSS level 3
  4. CSS level 4 (although this isn't an entirely new level as this has no single W3C Specification) Now let's take a look at each level of CSS to see what features they had and how each new level built upon the past levels.

CSS1
The first W3C specification of CSS was published on the 17th of December 1996, Hakon Wium Like and Bert Bos are both credited as the original inventors. It was the first CSS level to become an official W3C specification.
Some of it's features include

  • Font properties such as typeface and emphasis.
  • Color of text, backgrounds and all other elements. -Text attributes such as spacing between words, letters and line of texts
  • Unique identification and general classification of groups of attributes
  • Margin, padding, border and positioning for elements The W3C no longer recommends the CSS level 1 recommendation

CSS2
CSS level 2 specification was developed by the W3C and was published as a recommendation in May 1998, As a superset of CSS1 CSS2 includes a number of new features which include:

  • Absolute, fixed and relative positioning of elements
  • Z-index
  • Concept of media types
  • Support for aural StyleSheet
  • Bi-directional text
  • new font features such as shadows The W3C no longer maintains this recommendation

CSS 2.1
This is a revision of CSS level 2. It is also known as CSS level 2 revision 1.
No new features where implemented here rather it fixes the error of CSS2 and adds already implemented browser extensions to the specification.
It was officially published as a recommendation on June 7 2011.

CSS3
CSS3 is divided into multiple seperate documents called modules.
Each of the modules extends features defined in CSS2, preserving backwards compatibility.
Due to modularization different modules have different stability and statuses.
A handful of modules have candidate recommendation status and are considered fairly stable.
Some of the main module features are
CSS3-background, CSS3-box, CSS-fonts, CSS-media queries

CSS4
There is no single specification for CSS4 because the specification has been split into multiple different modules which level independently.

The evolution doesn't stop here as modules are developed by the CSS Working group, From time to time the CSS group publishes an array of whole modules that are considered stable enough to be implemented by browser developers.
In conclusion CSS evolved from CSS1 to CSS3 thereby producing more ways by which frontend web developers could use tu style their sites and make them more beautiful and complex with properties such as animation.
After going through stages CSS3 is the W3c recommendation that is used by most Frontend Web Developers today in the styling of their websites

Top comments (0)