1 CSS introduction


This chapter covers

  • A brief overview of CSS
  • Basic CSS styling
  • How to select HTML elements effectively

Cascading Style Sheets (CSS) is used to control the appearance of the elements of a web page. CSS uses style rules to instruct the browser to select certain elements and apply styles and effects to them.

Chapter 1 is a good place to start if you’re new to CSS or in need of a refresher. We’ll start with a brief history of CSS and swiftly move on to getting started with CSS, looking at ways to link CSS with HTML.

When we have our CSS up and running, we’ll look at the structure of CSS by creating a static, single-column article page with basic media components such as headings, content, and imagery to see how everything works together.

1.1 Overview of CSS

Håkon Wium Lie proposed the idea of CSS in 1994, a few years after Tim Berners-Lee created HTML in 1990. CSS was introduced to separate styling from the content of the web page through the options of colors, layout, and typography.

1.1.1 Separation of Concerns

This separation of content and presentation is based on the design principle Separation of Concerns (SoC). The idea behind this principle is that a computer program or application should be broken into individual, distinct sections segregated by purpose. The benefits of keeping good SoC include

1.1.2 What is CSS?

1.2 Getting started with CSS by creating an article layout

1.3 Adding CSS to our HTML

1.3.1 Inline CSS

1.3.2 Embedded CSS

1.3.3 External CSS

1.4 The cascade of CSS

1.4.1 User-agent stylesheets

1.4.2 Author stylesheets

1.4.3 User stylesheets

1.4.4 CSS reset

1.4.5 Normalizer