CSS Explained Simply: Web Demystified Guide to Cascading Style Sheets

Hello! Welcome to this new episode of Web Demystified. Last time we talked about HTML, now it’s time to make it pretty so let’s talk about CSS. Like HTML, CSS is a descriptive language, but instead of defining a semantic for some text it defines the look and feel of each HTML element.

In other words, CSS is like makeup for HTML. You mean, like that? Who got that stupid idea!

So CSS is an acronym standing for Cascading Style Sheets. It's a technology that was introduced at the end of the 90's with the idea to create a clear distinction between text semantics and presentation. As the graphic abilities of browsers were growing,

using purely HTML to do both was making things more and more complicated up to the point HTML documents were… an awful random tag soup. Okay! How does it work in practice? We have three ways to apply CSS to an HTML document:

First, we can use the style attribute on any opening HTML tag. We usually tend to avoid that method as it lacks flexibility and makes things very, very hard to maintain. Second we can add CSS declarations within an HTML style element into any HTML document.

It makes things easier to maintain, but it's only good for a single HTML document and usually websites are made of several HTML documents. Third we can create a CSS file, a style sheet, that we can link to any HTML document with the HTML tag: <link> This is usually the preferred way to handle CSS as a single style sheet can be linked by several HTML documents.

This is how a website can have a consistent look & feel. Okay, that said, how are we turning this…. … into that?

What? Again! So a CSS rule looks like this

it starts with a selector to indicate which HTML element we want to style. Then we open a rule block using curly brackets Finally we write down individual declaration, each made of a property name, a colon, a property value and a semicolon.

From that point on it's all about targeting HTML elements with proper selectors and writing down a list of declarations to achieve the expected results. That sounds way too easy, where's the trap? Well…

From a syntactic point of view it's really that simple, however, like all web technologies, CSS brings many concepts and features that need to be learned and mastered. To be honest, CSS is so rich that web makers with 20 years of experience still discover new tricks everyday. In particular, there are two points worth discussing here.

The first one is the number of properties available. More than 300 at the time of shooting this video. I mean… All those properties are the true power behind CSS, they define everything you can tweak to custom the look and feel of your HTML document.

To give you a rough idea, with CSS you can: layout all your HTML documents in every ways possible; add borders and backgrounds to any boxes;

adjust your style based on the media it is displayed on; You can apply… transformations, filters, masking , clipping, to any content. There are so many properties, you can do so many things! Knowing them is important, at least the most common ones.

The mastering part comes from the fact, all those properties can interact with each other sometimes in very surprising ways. I mean really surprising! What the …

The other feature we need to discuss here is the cascade. Yeah, remember CSS stands for "Cascading" Style Sheets. CSS allows styles to be applied from various sources.

Usually it's just the style sheets you created, but there is always the default style sheet every browser is applying to all HTML documents. Also, browsers allow their users to create and apply their own style sheets to any HTML document of their choice! You wonder how to do this, check out the Stylus or Stylish web extension for your favorite browser. It is an excellent way to start fiddling with CSS.

The Cascade is the full set of rules that define in which order styles from various sources are applied and there are a lot of subtleties in here. One of the most common use of the cascade is the mastery of selectors There are many type of selectors that can be combined to target any element of your choice.

Sometimes different selector can target the same element. In such cases, CSS defines a set of rules to identify in which order each style should be applied to the element. Those rules are called selector specificity. I won’t get into the details of the specificity rules in here, just because MDN can give you that information way better than I could.

However, as a rule of thumb, if you open the CSS dev tools of your favorite browser, you'll notice that they display the CSS rules in the order they are applied. Using all those features is sometimes puzzling. However, the more you experiment the more you'll learn about them… and to make your life easier with all of that I can only suggest you to do some reading on MDN

Okay! Let's recap. CSS is a declarative language that allows you to define the look and feel of HTML elements. Style rules target HTML elements with selectors and they applied visual effects defined by style declarations.

The cascade allows to override and combine those rules. Yes, it’s that simple! I can't believe it! This has to stop!

Thank you all for watching this video. if you want to know more and start fiddling with CSS I highly suggest you have a look at the MDN learn section. if you enjoyed that episode, feel free to like it and to share it with your friends… They will thank you for that If you want to continue the discussion feel free to comment below or join me and my colleagues on Twitter

And finally… Long live the open web, see you next time!