Who Invented CSS?

To web designers, front-end developers, or people with some knowledge of front-end technologies, Cascading Style Sheets (CSS) is a beautiful language that helps you create magical and dynamic web pages. But even with the knowledge and experience, people have of CSS’s ability to create beautiful web interfaces, there is a likelihood many don’t know who invented CSS. Therefore, in this article, we discuss who invented CSS and the details surrounding its creation.  

What is CSS

Cascading Style Sheets (CSS) is the presentation language for the web that helps us to style markup languages, especially HTML and XML documents. With CSS, we can beautify webpages using the tags and elements within the HTML documents. Its features help users with distinctive and dynamic layouts, colors, fonts, accessibility, and separation across multiple web pages.

It’s called cascading because of the specified hierarchy of the styles that are applied to a predictable element. CSS allows for the usage of many styles within a single HTML document, which is just one of its many advantages over other stylesheets, especially in the early days of the web.

In addition to HTML, CSS as a stylesheet is supported by multiple markup languages from XHTML to XML. With the .css file extension, it allows for well-defined rulesets to be applied to the tags or symbols that are within the markup language allowing for functional design over the existing structure.

Who invented CSS?

Hakon Wium Lie is largely credited with inventing CSS to create a universal standardized style sheet for the World Wide Web. Though CSS was first proposed by Hakon Wium Lie on October 10, 1994, a later proposal by Bert Bos was also quite influential as he became co-author of CSS1 and is regarded also as a co-creator of CSS. During that time, many different stylesheets for HTML were proposed, however, CSS1 was accepted by the W3C, the main international standards organization for the World Wide Web in 1996.

At that time, existing stylesheets couldn’t be sourced from different points on the web, and also, the cascading feature was necessary to allow multiple style sheets to influence the design of the webpage. With this feature, one style can cascade from one to another.

The people that made CSS1 possible, the first CSS version, were Hakon Wium Lie and Bert Bos. Lie and Bos proposed the case for CSS and are said to be co-creators of CSS who worked with W3C to release CSS1 in December 1996. It was only after three years that many browsers achieved close implementation of the CSS1 specification.

The Purpose of CSS

One of the three foundational web technologies is CSS (the other two are HTML and JavaScript). CSS stands for Cascading Style Sheets, and without CSS, websites are static, boring, and bare. The functionality will be at the bare minimum and challenging because the words scroll across the entire page and most things will look the same. With the introduction of CSS, much has changed, and the web experience that people now love become possible.

Web designers and developers wanted a little more creative control of how webpages appear, and with that different stylesheets were proposed, and eventually, CSS came to life. Before its inception, the general consensus was browser-influenced styles where each browser had its own style sheet language. Even the creator of HTML, Tim Berners-Lee, had in his NeXT browser a pre-determined style sheet.

Over time, browsers offered people little control over the design functionality and weren’t sufficient, and that’s why people started working on proposals to create an intuitive and practical stylesheet.

How CSS works?

Every webpage content is combined with the style information provided by CSS to display such content. The browser processes the HTML into Document Object Model (DOM) and fetches other resources linked to the HTML document such as images and CSS files. Afterward, the CSS is parsed and the different rulesets within it are applied to each tag (nodes), and the visual structure is then displayed as the webpage you see.

Every browser and browser agent supports CSS and its features However, some browsers don’t support some specific features or render certain features differently.

The selector-property-value operation as a ruleset guides the running of CSS styles for markup languages. The structure below makes up a CSS ruleset and applies a style value to the selector. The selector can often be an HTML tag or attribute, class, or pseudo-class:

selector { 
        property: value;
    }
    

Normally, CSS documents are externally linked to HTML documents. This allows for easy scalability of styles across multiple HTML documents, prevents repetition, and maintains flexibility across your website CSS styling. The link to the external CSS document should be placed in the header or <head> tag of the HTML using the <link> tag as seen below:

<!DOCTYPE html>  
<html>     
    <head>
        <link rel="stylesheet" href="mystyle.css">
    </head>     
    <body>   
        <p>This is a paragraph.</p>
    </body>  
</html>
    

You also have two other options for writing CSS code internally within the HTML document. The first method is internally using the <style> tags in the header which are used to define styles for that specific HTML page only. For example, in a single HTML document, we can add the color red to all paragraph elements within it by:

<!DOCTYPE html>  
<html>     
    <head>
        <style>
            p<{color: red;}>
        </style>
    </head>     
    <body>   
        <p>The text of this paragraph and all other paragraphs in this HTML doc will be red.</p>
    </body>  
</html> 
    

The second way to internally add CSS styling is via inline CSS. This method is used to apply a unique style to a single HTML element. For example:

<!DOCTYPE html>  
<html>         
    <body>   
        <p style="color:red;">Only this paragraph will be red.</p>
    </body>  
</html>
    

However, the latter two options of internally linking CSS styles within an HTML document are generally for smaller projects or quick testing of styles. This is because these internal CSS styling methods are not scalability across multiple HTML documents, lead to repetition, and prevent flexibility making them not viable for large projects with multiple HTML documents. Therefore, it is ideal to externally link your CSS documents to your HTML documents.

CSS Versions over the years

There are four CSS major versions that have been developed over the years. All of these versions were W3C specifications at one time and maintained by them.

The four main versions are CSS 1, CSS 2, CSS 2.1, and CSS 3. The first version - CSS 1 - was invented by Hakon Wium Lie and Bert Bos, released in December 1996 under the W3C recommendation, and based on the initial proposal and response proposal. With this version, designers could work on font properties, text color and properties, content alignment, box model, and group classification.

CSS 2, the second version, was published by W3C in May 1998, and was based on CSS 1, and introduced new features such as absolute, relative, and fixed position design and the famous z-index feature. In addition, it brought new features such as media types and design for bidirectional text. To improve on CSS 2, CSS 2.1 - the third version - worked on the errors and poor implementations that existed. Also, more standardization and specifications were introduced and worked upon till it was released as a W3C recommendation on June 2011.

With CSS 3, there was no single specification or recommendation but rather modules that had their own capabilities and features which extended on the previous version of CSS 2 but also allowed for backward compatibility. Here are some of the more popular CSS3 modules:

• Selectors
• Box Model
• Backgrounds and Borders
• Image Values and Replaced Content
• Text Effects
• 2D/3D Transformations
• Animations
• Multiple Column Layout
• User Interface

The current version and modules of CSS3 are maintained by the CSS Working Group under the W3C. However, CSS versions 1 to 2.1, are no longer maintained by the CSS Working Group as a recommendation.

Final Thoughts

CSS was invented by Hakon Wium Lie who first proposed it. Bert Bos was also influential in the creation of CSS as he became co-author of CSS1 along with Lie. CSS is the de-facto styling and presentation language that helps bring dynamic life to webpages and complements the static behavior of HTML documents. HTML and CSS together bring more life, presentation, separation, and beauty to every webpage.

CSS powers design on the web using its core features to create beautiful web pages and experiences. From features such as z-index and animations, CSS has long proven to be a web language that’s here to stay, and for quite some time largely thanks to Hakon Wium Lie and Bert Bos.