Introduction to CSS

What is CSS?

CSS tells our web browser how to style and show elements shown on our screen. We can create styling rules for various HTML elements and be confident that the web browser knows how to parse and apply our rules.

The paragraph you are reading right now has styling on it which creates a margin between the paragraph and the above element. This makes it easier for our eyes to separate grouped content.

Cascade, specificity and inheritance

In CSS different stylesheets cascade. What this means is that the order of our rules matter. In general the last defined rule will take priority over an earlier defined rule, given that they have equal specificity.

We can target styles towards tag names, class names or ids. If there are rules with clashing attributes, specificity handles the prioritization of styles. In general, a tag/element selector has the least priority, class name selectors have more and id selectors have the highest priority.

Some CSS property values set on parent elements are inherited by their child elements, which means that all child elements inherit the same style unless explicitly set otherwise. Among other this includes color and font property values.

We will explore cascading, specificity and inheritance in more detail later on, but these three concepts are important to be aware of when working with CSS.

History

The CSS standard was first proposed by Håkon Wium Lie in 1994 while he was working at CERN alongside Tim Beners-Lee, who was one of the inventors behind HTML.

Håkon Wium Lie at a conference in California. [Image by Franco Folini]
Håkon Wium Lie at a conference in California. [Image by Franco Folini]

At the time, there were several other competitors to CSS, but CSS quickly dominated the market because of the cascading property of the standard.

The CSS specification is now maintained and developed by a group within W3C called the CSS Working Group which mostly consists of browser vendor representatives.

Definition

CSS

Cascading Style Sheets

CSS is a language used to describe how elements should be shown on a screen. The CSS standard is one of the open Web's core languages and all browser follow a common specification.