Cascade Algorithm Made CSS the Best Choice for Web Style

This process decides which style sheet will use so that there are no conflicts

Daniel Roncaglia
Jun 18, 2020 · 5 min read
Image for post
Image for post
Photo by Mike Lewis HeadSmart Media on Unsplash

Cascading Style Sheets is the primary language used in styling web pages. The cascade algorithm was the reason why the creators of the web chose the CSS.

This process combines style sheets with a hierarchy to resolve conflicts between them. It is one of the points that most cause doubts in CSS learning.

The creator of CSS, Håkon Wium Lie, tells how that choice happens in the early 1990s. The report is in his Ph.D. thesis presented to the University of Oslo (Norway) in 2006.

Three specifications were the basis of the World Wide Web. The project has developed by the team led by Tim Berners-Lee.

The HyperText Markup Language formats the document. The Universal Resource Locator is what allows the link between the papers. The HyperText Transfer Protocol performs transfers between materials on the internet.

These implementations have available free by the European Organization for Nuclear Research.

The National Center for Supercomputing Applications launched Mosaic in 1993. Thas was the first web browser. You could surf the pages. “The web quickly gained momentum,” Wium Lie says.

A useful browser was providing access to an increasing number of linked documents. Users interested in technology grow up.

But the non-scientific authors start protested for changes in appearances. One of the most requests is the possibility to choose fonts and colors of elements.

In an email sent in 1944 for a mailing list of developers, Marc Andreessen shows the tension: “What can you do about it? Probably nothing”, writes the responsible for Mosaic.

“It has been a constant source of delight for me over the past year to get to continually tell hordes (literally) of people who want to — strap yourselves in, here it comes — control what their documents look like in ways that would be trivial in TeX, Microsoft Word, and every other common text processing environment: ‘Sorry, you’re screwed.’”, Marc Andreessen says.

Style sheets

They need to thought an alternative proposal to the structured language of HTML. The traditional print publication uses style sheets. The manuscript came with information about the layout of images and textual elements.

The personal computers changed the preparation of manuscripts in the 1980s. Desktop publishing features tools that allow stylization by the author.

The style sheets provide information about the applications made by the designer.

On the web, with its hyperlinks, the logic should be different. In the thesis, Håkon Wium Lie presents six specific requirements.

The page should be the basis for the flow. Properties and values ​​must be screen-based.

It is also necessary to combine style sheets and specific support from the media.

The visited link must have a different style from the unvisited ones. Finally, the technology must be robust.

Until 1996, developers proposed at least nine languages. Wium Lie details each one of them with the pros and cons.

The CSS creation had the participation of Bert Bos, W3C HTML, CSS Working Group, and www-style. The proposal of CSS came in October 1994.

CSS syntax

The syntax of CSS is simple. They are two main parts: selector and declaration.

h1 {font-size: 36px}

While “h1” is the selector, the declaration has two parts between the square brackets {}. There are a property (font-size) and a value (36px).

A block could have many declarations:

h1 { 
font-size: 36px;
font-family: "Segoe UI";
}

These examples influence one of the properties in the document. But, also qualifies as a style sheet on its own. With other elements, it will determine the final presentation.

Many selectors can have the same declaration. Logic occurs in selectors.

h1, h2 {
font-family: "Segoe UI";
}

Cascading

The cascading mechanism in CSS is multifaceted for several purposes. The function is to determine the order between conflicting element-property declarations. “The challenge is to pick the right declaration,” Wium Lie explains.

Style sheets have three possible origins: browser, author, and user. Author declarations win over user declarations, and user declarations win over browser declarations.

Three factors are importance, specificity, and source order.

In the example below, two identical selectors “h1” state different colors. The choice of CSS will be by sequence. With the withdrawal of the second, the first begins to run.

Image for post
Image for post
Made in dabblet

Two other concepts work with the cascade: specificity and inheritance. Together they control how CSS applies what to elements.

Specificity

The specificity is a measure of how explicit is a selector. The specification formula calculates by adding points to the selectors.

An element selector points to all elements on the page. Your score is thus lower.

A class selector has a higher specification score. It will only point to the elements that have the indicated class.

Image for post
Image for post

Inheritance

Within this context, another point is inheritance. CSS properties are inherited or not inherited. In this way, CSS distinguishes between specified, computed, and actual.

While “h1” is the selector, the declaration has two parts between the square brackets {}. There are a property (font-size) and a value (36px).

In the example, we see that the color applied to a letter differs from the rest.

Image for post
Image for post

The dev who can understand the concepts described will have his job facilitated.

Often changes in the style of the element do not happen because it is under the effect of the cascade.

With that idea in mind, he can solve it in seconds with a quick review. Hours of work can save.

devs

humans and technology

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store