Introduction to CSS

CSS is used to style and lay out web pages — for example, to alter the font, colour, size and spacing of your content, split it into multiple columns, or add animations and other decorative features. This module gets you started on the path to CSS mastery with the basics of how it works, including selectors and properties, writing CSS rules, applying CSS to HTML, how to specify length, colour, and other units in CSS, cascade and inheritance, and debugging CSS.

Prerequisites

Before starting this module, you should have:

1. Basic familiarity with using computers, and using the Web passively (i.e. just looking at it, consuming the content.)
2. A basic work environment set up as detailed in Installing basic software, and an understanding of how to create and manage files, as detailed in Dealing with files.
3. Basic familiarity with HTML, as discussed in the Introduction to HTML module.

Guides

This module contains the following articles, which will take you through all the basic theory of CSS, and provide ample opportunity for you to test out some skills.

How CSS works

In this module we start off with a theoretical grounding, looking at what CSS is, how the browser turns HTML into a DOM, how CSS is applied to parts of the DOM, some very basic syntax examples, and what code is used to actually include our CSS in our web page.

CSS syntax

Next up, we dive into CSS syntax in a lot more detail, looking at how properties and their values form into declarations, multiple declarations form into declaration blocks, and declaration blocks and selectors form into complete CSS rules. We round off the article by looking at other CSS syntax features such as comments and whitespace.

Selectors

Selectors are mentioned in the previous article, but in this guide we go into a lot more detail, showing what selector types are available and how they work.

CSS values and units

There are many types of CSS property values to consider, from numerical values to colors to functions that perform a certain action (like embedding a background image or rotating an element.) Some of these rely on particular units for specifying the exact values they are representing — do you want your box to be 30 pixels wide, or 30 centimetres, or 30 ems? In this guide, we look at more common values like length, colour and simple functions, as well as exploring less common units like degrees, and even unitless numerical values.

Cascade and inheritance

CSS has two different but related systems to resolve situations where you have selector conflicts (different selectors select the same elements; which one wins and ends up being applied?) and elements nested inside other elements (some of the styling applied to the parent elements makes sense to be inherited by the child elements; some doesn't.) This article covers both systems in enough detail to be useful but not overwhelming.

The box model

The CSS box model is the foundation of layout on the Web — each element is represented as a rectangular box, with the box's content, padding, border, and margin built up around one another like the layers of an onion. As a browser renders a web page, it works out what styles are applied to the content of each box, how big the surrounding onion layers are, and where the boxes sit in relation to one another. Before understanding how to create CSS layouts, you need to understand the box model.

Debugging CSS

In the final article of this module, we take a look at the basics of debugging CSS, including exploring the CSS applied to a page, and other tools that can help you find errors in your CSS code.

Assessments

The following assessments will test your understanding of the CSS basics covered in the guides above.

Fundamental CSS comprehension

This assessment tests your understanding of the above guides with some carefully crafted exercises.

See also

Intermediate Web Literacy 1: Intro to CSS

An excellent Mozilla foundation course that explores and tests a lot of the skills talked about in the Introduction to CSS module. Learn to style HTML elements on a webpagweb page CSS selectors, attributes, and values.