CSS3 Logo

CSS3: The Make-up Palette for the Web

CSS3 Logo

Without the use of Cascading Style Sheets 3 (CSS3) the web on its own would be a jumble of words; lacking organisation, composure and uniqueness. Every page would look similar, with little ability to adapt the webpage beyond using tables and breakpoints within the Hypertext Markup Language 5 (HTML5).

CSS wasn’t always what we know today. The initial release was on 17th December 1996, having been created by the World Wide Web Consortium (W3C) with the CSS Level 1 Recommendation. This brought about fonts, colours, line spacing, margins, padding, borders and backgrounds to help add different feels to each webpage. At this stage, the web started to become a unique space, with each page having the ability to have its own identity.

CSS2 was introduced in May of 1998, further allowing designers and developers more freedom when it came to laying out web pages. The featured added include z-index, positioning (Relative, fixed and absolute), media types, bidirectional text and aural style sheets. This allowed pages to have elements that moved when you scrolled down the screen, such as fixed navigation bars or parallax imaging. A fixed navigation at the top of the screen is currently a common practice on many websites, however this is likely to change in years to come with many new design ideas having their own breakthroughs.

CSS3 is the current version of Cascading Style Sheets, introducing the ability to add new font faces, gradients, animations, transitions and transformations allowing elements within HTML to be manipulated on the screen. With the addition of media queries, CSS3 inherently accommodates for the mobile-first mentality (Progressive Enhancement) of responsive design. This theory states that a web page should be designed for the smallest screen first, adding features for larger screens later on. Previous, desktop first (Graceful Degradation) was used, a practice which saw designers consider desktop websites before removing features in order to get them to fit on a smaller screen.

GIF demonstrating a navigation bar staying fixed at the top of the screen
W3C Box Model

Unlike the other two versions of CSS, CSS3 was released in separate modules. These modules include Selectors, The Box Model, Backgrounds + Borders and Text effects. The selectors allow developers to edit elements by name, type, attribute, class and more. In order to allow consistency between HTML elements on a page, the box model was introduced to allow a standard for applying margins, padding and borders to elements within a webpage.

CSS, although still not without limitations, has shaped a beauty within website design; allowing designers to create unique, user-friendly and accessible content. Without access to stylesheets, websites would be bland and often hard to navigate. It’s easy to take what we see today for granted, but a mere 20 years ago web pages were very different.

2] http://www.css-class.com/a-brief-history-of-css/
3] https://visual.ly/community/infographic/computers/css-interesting-facts-and-history
4] https://www.upwork.com/hiring/development/css-vs-css3/