1 CSS introduction

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

Chapter one 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. Then swiftly moving on how to get started with CSS, looking at ways to link CSS with HTML.

Once we have our CSS up and running we’ll look at the structure of CSS by creating a single static column article page with basic media components like headings, content and imagery and see how it all works together.

1.1 Overview of CSS

Håkon Wium Lie first 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 of Separation of Concerns (SoC). The idea behind this is that a computer program or application should be broken up 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.2.1 Setup

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 cascading style sheets

1.4.1 User-agent style sheets

1.4.2 Author stylesheets

1.4.3 User stylesheets

1.4.4 CSS reset

1.4.5 Normalize

1.6.2 Combinators