What CSS does
Cascading style sheets, also known by its street name CSS is a type of programming language (yes, it is one) that is used to style HTML documents. If you read my previous post about HTML, then you know that the purpose of HTML is to describe content to the browser using delimiters so it can be marked up (formatted) correctly in the browser.
As you can see, HTML is nothing pretty to look at. Well, that is where CSS comes in! CSS describes styles to the browser. CSS is used to style everything from font size and color, to advanced layouts that can handle any screen size. But things weren’t always like that. CSS has come a long way since its early days. Lets take a trip back in time!
A brief history of CSS
Let’s get in our time machine and go back to 1994. Norwegian computer scientist Håkon Wium Lie (alongside other web legends like Tim Berners-Lee and Robert Cailliau) are working at Physics laboratory CERN. CSS (and the web) have its origins through the efforts of these three men. At this time, the web is the major emerging platform for electronic publishing.
However, no web language existed that was capable of describing the complexities of a newspaper layout. Håkon had created personalized newspaper presentations at MIT Media Laboratory and thus was positioned to see the need for a style sheet web language.
The concept of a browser with an internal (bundled with the browser) style sheet wasn’t exactly a new concept at the time. In 1992, a developer named Pei-wei built a browser called Viola, which had its own style sheet.
Most of the browsers at the time gave few (if any) options for users to fiddle with the browser styles. The writers of web pages flocked to internet forums with questions like “how can I change my font family/color.” Some of the experts were indifferent to the author’s request for more control over browser styles.
Timing matters
Luckily for us, three days before Netscape released their new (at the time!) browser, Håkon published the first draft of his proposal titled “Cascading HTML Style Sheets”. HTML 3 Architect Dave Raggett arranged the proposal draft to go public right before a high-profile web conference in Chicago.
The proposal was immature (especially when compared to modern CSS) but it provided a theoretical proof of concept and conversation tool for the ongoing web browser revolution. Håkon joined forces with Computer Scientist Bert Bos, who was building Argo (a web browser he developed to test his own style sheet proposal).
A major strength of the Argo style language was that it was general enough to be applied to other markup languages. It was thought CSS should have this quality, and the “HTML” part of the name was removed from the specification. this is a good thing, freeing up HTML to focus on structure and structure alone, and CSS to focus on styling (separation of concerns).
Interestingly enough, Argo had features (like attribute selectors and generated text) that CSS didn’t even have at the time. It would implement it in CSS 2 though!
The Browser wars
The first commercial browser to implement CSS was Microsoft's Internet Explorer 3 (released way back in 1996). The W3C (World Wide Web Consortium), an organization that sets web standards didn’t even include the CSS 1 specification in its recommendations.
This led to CSS behaving in an unpredictable manner in some browsers. For example, Internet Explorer didn’t implement much of box model.
The next browser to take a stab at implementing CSS was Netscape Navigator. The company was initially skeptical towards style sheets, but reluctantly agreed to support it (likely to stay competitive). However, in a rush to get it to market some CSS features were not thoroughly tested. Which of course, is never a good thing and led to all sorts of problems for users.
Another downside to Netscape’s browser was their approach to implementing the CSS in their browser. They translated CSS internally into Javascript snippets! Imagine if that method still existed today, us developers would have to link another stylesheet (JSS-JavaScript Styling Sheet)! No thank you
Modern CSS
Now that we went over some CSS history, isn’t it amazing to reflect on how far the language has come? Considering that CSS was never made for layout, it is amazing how developers have created layout tools like Flexbox and Grid. In two lines of code, I can have a complex grid in both directions (x, y, or both in the case of CSS grid) or one direction (flexbox has x or y, but not both at the same time). Just look at the code for that grid of shapes
This may look complicated if you haven’t used Grid before, but all I did was set display:grid
on the parent container (the main
element) and created a 4 column grid. All the other rules are positioning the children of the grid into rows and columns in the grid. Stuff like this was impossible before Grid came along. Developers of Ye Olde times used to use the table
elements for entire page layouts, imagine that!
User agents
A discussion about style sheets would not be complete without speaking about user agent styles. Any web designer worth their salt knows that web browsers don’t just display plain text. There are some default browsers that come bundled with the browser. The purpose is to ensure a good UX (User Experience).
Imagine going to a web page and not being able to read anything, because the words are all smushed together, or the line height is a mess. It is hard to imagine a world like that, but the fact is.. the web would b a mess if it wasn’t for some sort of default styling. Plus, thanks to people like Eric Meyer you can reset your browser styles. Doing so allows you to start styling your HTML document with a clean slate, so to speak. Very useful for whatever visual design challenges will come your way!
Well, I was going to talk about the CSS cascade, but this blog post is already far too long. I will talk about that (and more CSS goodness) in the next post! Did you learn anything new in this blog post? comments? leave them below!