Introduction to CSS

This translation is incomplete. Please help translate this article from English

Learn everything required to master CSS from scratch. We provide you with both theory and practice to help you become an awesome web developer.

Welcome to our introduction to CSS.

This tutorial is made to drive you in the wonderful world of CSS. If you have absolutely no idea what CSS is, we strongly encourage you to take a look at our CSS Basics article. It will provide you with the minimum necessary skills to get started. This tutorial is the next step in your journey and focuses on the theory beyond CSS that is necessary to understand how things work. If you're more of a practical person, you can skip the theory and jump to our set of How-to articles that will help you use CSS on a daily basis.

Okay, let's get started!

What is CSS

CSS (Cascading Style Sheets) is a language for specifying how documents are presented to users. This language is formally defined by the W3C.

A document is usually a text file which is structured using a markup language such as HTML, SVG, or XML.

Presenting a document to a user means converting it into a usable form for your audience. Browsers, like Firefox, Chrome or Internet Explorer, are designed to present documents visually, for example, on a computer screen, projector or printer.

To be perfectly clear, a document is not necessarily the same thing as a file. The document you are reading now is not stored in a file. When your web browser requests this page, the server queries a database and generates the document, gathering parts of the document from many files. However, while learning you will essentially work with documents stored in files.

Web browsers apply CSS rules to a document to display them properly. A CSS rule is a set of properties associated with a selector. A set of CSS rules contained within a stylesheet determines how a webpage should look. "Cascading" refers to the rules that govern how selectors are prioritized to change a page's appearance. This is a very important feature, since a complex website can have thousands of CSS rules.

If the previous paragraph sounds like a bunch of nonsense, don't panic! The rest of this tutorial will clarify all of this.

Using CSS

Okay that sounds pretty cool, let's quickly see how to link a CSS stylesheet with an HTML document. This will be the basis you'll use to fiddle with CSS in our next articles.

In order to be able to work and test this properly you need a text editor and a web browser. If you don't feel confident with setting up a working environment, feel free to use Thimble, Mozilla's learning tool. If you start a project from scratch with it, it will handle all the following basic setup steps for you.

 First of all, we need 2 files:

  • An HTML file (let's say its name is index.html)
  • A CSS stylesheet we'll call style.css

Create those two files in a single folder on your machine.

index.html should contain the following code:

<!DOCTYPE html>
  <meta charset="utf-8">
  <title>My CSS experiment</title>

  <link href="style.css" rel="stylesheet">
  Hello World!

style.css should contain the CSS rule:

body {
  font-size: 3em;
  color: green;

Save those two files, then open index.html within your browser and you'll see this:

Your learning journey

Congratulations, you've created your first CSS stylesheet, now it's time to dig deeper. At this point you have a choice to make: Would you like to get into the theory or get your hands dirty. Don't feel anxious there is no right or wrong. It's very easy and common to jump from one side to the other, it's just a matter of preference.

The theory

How CSS works
This article is a journey behind the scenes, explaining how web browsers use CSS to turn HTML into something more complex.
The CSS syntax
Everything you need to know to write a proper CSS stylesheet that works everywhere every time.
CSS Selectors
Selectors are made to properly select page regions to style them, that makes them a key feature in CSS and they come with a rich semantic to master.
Cascading and inheritance
Understanding how CSS rules overlap and inherit properties from each other make the difference between amateurism and professionalism.
The box model
The CSS box model is how CSS handles box sizes and is the first source of trouble when fiddling with CSS. Learn it and make your life easier.
Introduction to CSS layout
Moving boxes around the page, building a layout, is the biggest expectation from web designers and is also the most challenging, task. Let's start easy.
Other CSS key concepts
This article lists a series of vocabulary and key concepts which are important to know once you start to familiarize yourself with CSS

In practice

How to style text
Styling text is at the core of CSS, this article will scratch the surface by providing everything that is required to properly display text nicely.
How to create fancy boxes
Everything you need to know about borders and backgrounds to create nice looking boxes.
How to manage colors and images
Color values are important when styling content, however CSS has various ways of handling that. This article will help you avoid the confusion between colors and colors that are used as images.
How to customize a list of elements
Making a list of elements look cool is always challenging, let's see how it is possible.
How to customize HTML tables
In HTML, tables are a tricky structure to master. In CSS there is also plenty of pitfalls that can make your life difficult. This article will help you become like Indiana Jones in the temple of doom.