What is CSS?

CSS est l'abbréviation pour Cascading Style Sheets (feuilles de styles en cascade) et est le langage primaire utiliser pour décrire et formater l'aspect des pages Web sur Internet et dans les documents de balisage (par exemple HTML et XML) en général.

A markup language like HTML was initially designed to provide information about formatting and looks itself, but it soon became clear that it would make much more sense to split this into two layers: Document Content and Document Presentation, with CSS fulfilling the task of the latter. Historically that is why HTML has tags like font, which sole purpose is to adjust font family, color and size locally, a job that is today handled by CSS. This allows the developer to re-use formatting rules across several places in the same document and even across multiple documents. Here's an example to prove my point, and don't worry if it's not entirely clear to you what it does - all aspects will be explained throughout this tutorial:

Mise en forme du texte à l'ancienne, en utilisant uniquement le HTML :

This is a piece of
<font face="Tahoma,Verdana,Arial" color="Blue" size="3"><i><b>text</b></i></font> with
<font face="Tahoma,Verdana,Arial" color="Blue" size="3"><i><b>highlighted</b></i></font> elements in
<font face="Tahoma,Verdana,Arial" color="Blue" size="3"><i><b>it</b></i></font>.

Une approche plus moderne avec CSS :

<style type="text/css">
.highlight {
	color: Blue;
	font-style: italic;
	font-weight: bold;
	font-size: 120%;
	font-family: Tahoma, Verdana, Arial;
}
</style>

This is a piece of
<span class="highlight">text</span> with
<span class="highlight">highlighted</span> elements in
<span class="highlight">it</span>.

Notice how I simply re-use the same set of rules across several HTML tags. This is already an advantage when using it three times, like we do in the example, but it doesn't end there - put the CSS in an external stylesheet file (more on that later) and you can use the same rules across your ENTIRE website. And how about when you decide that highlighted text should be red instead of blue? With the first approach, you would have to manually edit the tags everywhere you used it - with CSS, just change the single ".highlight" rule!

Résumé

CSS vous permet de facilement appliquer des règles de formattage et de mise en page à vos éléments puis réutiliser ses règles à travers plusieurs éléments et pages de votre projet. Dans cette introduction, nous avons observé à du code CSS, mais nous n'avons pas parlé de comment ça fonctionne ni de pourquoi ça ressemble à ça, ce sera le sujet des prochains chapitres, où nous partons de zéro et nous expliquons tout en détail.