Les bases de CSS

« Précédent Suivant »

CSS (pour Cascading Style Sheets en anglais, ce qui correspond à « feuilles de style en cascade ») correspond au code qui est utilisé pour appliquer un style, mettre en forme votre page web. Les bases de CSS regroupent tout ce qu'il faut savoir pour commencer. Nous répondrons à des questions comme : « Comment rendre mon texte rouge ou noir ? », « Comment faire apparaître mon contenu à tel endroit de l'écran ? », « Comment décorer ma page web avec une image ou une couleur d'arrière-plan ? ».

Qu'est-ce que CSS ?

De la même façon que HTML, CSS n'est pas vraiment un langage de programmation. C'est un langage de feuille de style, c'est-à-dire qu'il permet d'appliquer des styles sur différents éléments sélectionnés d'un document HTML. Par exemple, on peut sélectionner tous les éléments d'une page HTML qui sont paragraphes et afficher leurs textes en rouge avec ce CSS :

p {
  color: red;
}

Faisons un essai : copiez ces trois lignes de code CSS dans un nouveau fichier à partir de votre éditeur de texte puis sauvegardez le fichier sous style.css dans votre répertoire styles.

Pour que ça fonctionne, il faut appliquer le CSS au document HTML, sinon la mise en forme décrite dans le fichier CSS n'affectera pas l'affichage de la page HTML dans la navigateur. Si vous n'avez pas suivi toutes les étapes pour arriver ici, vous pouvez lire l'article gérer les fichiers et les bases de HTML pour savoir par où commencer.

Ouvrez votre fichier index.html et copiez la ligne suivante quelque part au sein de l'élément head (c'est-à-dire entre les balises <head> et </head>) :
```
<link href="styles/style.css" rel="stylesheet" type="text/css">
```
Sauvegardez index.html puis chargez-le dans votre navigateur. Vous devriez obtenir quelque chose comme :

A mozilla logo and some paragraphs. The paragraph text has been styled red by our css. Si le texte de votre paragraphe s'affiche en rouge, félicitations ! Vous venez d'écrire votre premier CSS qui fonctionne !

Anatomie d'une règle CSS

Regardons un peu plus en détails ce que nous avons écrit en CSS :

Diagramme expliquant les différents éléments d'une déclaration CSS

Cette structure s'appelle un ensemble de règles (généralement, on appelle ça une « règle »). Comment s'appellent les différentes parties ?

Sélecteur: Le nom de l'élément HTML se situe au début de l'ensemble de règles. Il permet de sélectionner les éléments sur lesquels appliquer le style souhaité (en l'occurence, les éléments p). Pour mettre en forme un élément différent, il suffit de changer le sélecteur.
Déclaration: C'est une règle simple comme color: red; qui détermine les propriétés de l'élément qu'on veut mettre en forme.
Propriétés: Les différentes façons dont on peut mettre en forme un élément HTML (dans ce cas, color est une propriété des éléments p). En CSS, vous choisissez les différentes propriétés dont vous souhaitez qu'elles soient affectées par votre règle CSS.
Valeur de la propriété: À droite de la propriété, après les deux points, on a la valeur de la propriété. Celle-ci permet de choisir une mise en forme parmi d'autres pour une propriété donnée (par exemple, il y a d'autres couleur que red pour la propriété color).

Les autres éléments importants de la syntaxe sont :

Chaque ensemble de règles, à l'exception du sélecteur, doit être entre accolades ({}).
Pour chaque déclaration, il faut utiliser deux points (:) pour séparer la propriété de ses valeurs.
Pour chaque ensemble de règles, il faut utiliser un point-virgule (;) pour séparer les déclarations entre elles.

Ainsi, si on veut modifier plusieurs propriétés d'un coup, on peut utiliser plusieurs déclarations dans une seule règle en les séparant par des points-virgules :

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

Sélectionner plusieurs éléments

Il est aussi possible de sélectionner plusieurs types d'éléments pour tous leur appliquer une même règle. Il suffit de placer plusieurs sélecteurs, séparés par des virgules. Par exemple :

p,li,h1 {
  color: red;
}

Les différents types de sélecteurs

Il y a différents types de sélecteurs. Dans les exemples précédents, nous n'avons vu que les sélecteurs d'élément qui permettent de sélectionner les éléments HTML d'un type donné dans un document HTML. Mais ce n'est pas tout, il est possible de faire des sélections plus spécifiques. Voici quelques-uns des types de sélecteur les plus fréquents :

Nom du sélecteur	Ce qu'il sélectionne	Exemple
Sélecteur d'élément (parfois appelé « sélecteur de balise » ou « sélecteur de type »)	Tous les éléments HTML d'un type donné.	`p` sélectionne tous les `<p>`
Sélecteur d'ID	L'élément d'une page qui possède l'ID fourni (pour une page HTML donné, on ne peut avoir qu'un seul élément pour un ID donné).	`#mon-id` sélectionne `<p id="mon-id">` ou `<a id="mon-id">`
Sélecteur de classe	Les éléments d'une page qui sont de la classe donnée (pour une page donnée, il est possible d'avoir plusieurs éléments qui partagent une même classe).	`.ma-classe` sélectionne `<p class="ma-classe">` et `<a class="ma-classe">`
Sélecteur d'attribut	Les éléments de la page qui possèdent l'attribut donné.	`img[src]` sélectionne `<img src="monimage.png">` mais pas `<img>`
Sélecteur de pseudo-classe	Les éléments donnés mais uniquement dans un certain état (par exemple quand on passe la souris dessus).	`a:hover` sélectionne `<a>` mais uniquement quand le pointeur de la souris est au-dessus du lien.

Il existe plein d'autres sélecteurs, pour les découvrir tous, vous pouvez lire notre guide sur les sélecteurs.

Les polices (fontes) et le texte

Maintenant que nous avons vu quelques bases de CSS, ajoutons quelques règles et informations à notre fichier style.css pour que notre exemple soit réussi. Tout d'abord, améliorons les polices et le texte.

Note : Vous verrez qu'il y a également un commentaire qui explique ce que « px » signifie. Dans un document CSS, tout ce qui est placé entre /* et */ est un commentaire CSS : le navigateur l'ignore. C'est dans les commentaires qu'on peut écrire des notes pour mieux expliquer le but de ce qu'on fait (par exemple cela pourra vous aider quand vous relirez votre code dans quelques mois).

Pour commencer, revenez quelques étapes en arrière et récupérez le résultat de Google Fonts enregistré quelque part. Ensuite, ajoutez l'élément <link ... > quelque part au sein de head dans le fichier index.html (c'est-à-dire quelque part entre les balises <head> et </head>). Ça devrait ressembler à :
```
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
```
Ensuite, supprimez la règle existante dans votre fichier style.css. Cette règle était pratique pour tester mais afficher du texte en rouge n'est pas la meilleure des mises en forme.
Ajoutez les lignes suivantes à leur place, en remplaçant la ligne avec modèle avec la ligne fournie par Google Fonts qui contient font-family (font-family représente la (ou les) police(s) qu'on veut utiliser pour le texte). Ce premier ensemble de règles définit une police de base et sa taille pour toute la page (<html> est l'élément parent de tous les éléments de la page, tous les éléments contenus dans la page hériteront donc de la même font-size et font-family):
```
html {
  font-size: 10px; /* px signifie 'pixels': la taille de base pour la police est désormais 10 pixels de haut  */
  font-family: modèle: cela devrait être le reste du résultat obtenu à partir de Google fonts
}
```
Ensuite, fixons les tailles des différents textes contenus dans le corps du HTML (<h1>, <li>, et <p>). Nous allons également centrer le texte du titre et donner une taille de ligne et un espacement de caractère entre les lettres pour que le contenu du corps (body) du document soit plus lisible :
```
h1 {
  font-size: 60px;
  text-align: center;
}

p, li {
  font-size: 16px;    
  line-height: 2;
  letter-spacing: 1px;
}
```

Vous pouvez ajuster ces valeurs en px comme vous voulez pour que le style obtenu soit celui que vous souhaitez. Vous devriez obtenir quelque chose comme ça :

a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered

Boîtes, boîtes, encore et toujours des boîtes

Vous verrez rapidement qu'en CSS, tout tourne autour de boîtes : définir leurs tailles, leurs couleurs, leurs positions, etc. La plupart des éléments HTML d'une page peuvent être vues comme des boîtes placées sur les autres.

a big stack of boxes or crates sat on top of one another

C'est pour cette raison que l'architecture de CSS est principalement basée sur un modèle de boîtes. Chacun de ces blocs prend un certain espace sur la page, de cette façon :

padding, l'espace autour, proche du contenu (par exemple, l'espace autour du texte d'un paragraphe) (en français, on pourrait traduire cela par du « rembourrage » mais le terme padding étant communément utilisé lorsqu'on parle de CSS, on continuera à utiliser ce terme)
border, la ligne qui est juste autour du padding (en français cela correspond à la bordure)
margin, l'espace extérieur, autour de l'élément (en français cela correspond à la marge)

three boxes sat inside one another. From outside to in they are labelled margin, border and padding

Dans cette section, nous utiliserons :

width (la largeur de l'élément)
background-color, la couleur derrière le contenu de l'élément et son padding
color, la couleur du contenu de l'élément (généralement du texte)
text-shadow, affiche une ombre portée sur le texte à l'intérieur de l'élément
display, définit le mode d'affichage d'un élément (on ne s'en occupera pas cette propriété pour le moment)

Allons-y : ajoutons un peu plus de CSS à notre page ! Continuez d'ajouter ces nouvelles règles à la suite des autres. N'ayez pas peur d'expérimenter et de tester différentes valeurs pour voir ce qu'elles font.

Changer la couleur de la page

html {
  background-color: #00539F;
}

Cette règle permet de définir la couleur utilisée en arrière plan pour toute la page. Vous pouvez ici utiliser la valeur que vous aviez choisie lors de la conception de votre site.

Comment mettre en forme le corps de la page (`<body>`)

body {
  width: 600px;
  margin: 0 auto;
  background-color: #FF9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}

Occupons-nous de l'élément body. Cet ensemble de règles contient plusieurs déclarations, étudions les une par une :

width: 600px; — cette déclaration impose une largeur de 600 pixels pour le corps de la page.
margin: 0 auto; — Ici on a deux valeurs pour la propriété. Lorsqu'on utilise deux valeurs sur une propriété comme margin ou padding, la première valeur est utilisée pour le haut et le bas de l'élémént (dans ce cas : 0) et la seconde valeur est utilisée pour les côtés gauche et droit (la valeur auto qu'on utilise ici est une valeur spéciale qui divise l'espace horizontal disponible en parts égales entre la gauche et la droite. Il est aussi possible d'utiliser un, trois ou quatre valeurs, pour plus d'informations, voir cet article qui explique comment cela fonctionne.
background-color: #FF9500; — comme on l'a vu auparavant, cela permet de définir la couleur utilisée en arrière-plan. Ce code couleur correspond à un rouge orangé qui sera utilisé pour le corps de la page, cela permettra d'avoir un contraste avec le bleu foncé utilisé pour l'élément html. N'hésitez pas à modifier cette valeur pour voir ce que ça donne, vous pouvez utiliser white ou une autre valeur si vous préférez.
padding: 0 20px 20px 20px; — ici on a quatre valeurs pour le padding afin de créer un peu d'espace autour du contenu. On n'a donc aucun espace pour le padding en haut du corps de la page, on a 20 pixels à gauche, en bas et à droite. Dans l'ordre, les valeurs correspondent au haut, à la droite, au bas et à la gauche.
border: 5px solid black; — cette déclaration permet d'utiliser une bordure pleine, large de 5 pixels pour entourer tout le corps de la page.

Positionner le titre et le mettre en forme

h1 {
  margin: 0;
  padding: 20px 0;    
  color: #00539F;
  text-shadow: 3px 3px 1px black;
}

Vous avez du remarquer qu'il y a un espace horrible en haut du corps de la page. Cela est dû au fait que les navigateurs appliquent un style par défaut à l'élément <h1> (entre autres), même quand vous n'avez défini aucune règle CSS ! À première vue, on pourrait penser que c'est une mauvaise idée et que ce n'est pas au navigateur de décider de la mise en forme. Toutefois, il est préférable que n'importe quelle page, même celles qui n'utilisent pas de CSS, puissent être lisibles et que le lecteur puisse distinguer un titre d'un paragraphe. Pour se débarrasser de cet espace, on « surcharge » le style par défaut avec une marge nulle grâce à margin: 0;.

Ensuite, nous ajoutons 20 pixels de padding en haut et en bas du titre et on prend la même couleur pour la police que celle utilisée pour l'arrière-plan de html.

Une propriété intéressante qu'on a utilisé ici est text-shadow. Cette propriété permet d'applique une ombre au contenu de l'élément. La déclaration utilise quatre valeurs :

La première correspond au décalage horizontal, exprimé en pixels, de l'ombre par rapport au texte. Autrement dit, plus la valeur est élevée, plus l'ombre porte loin. Une valeur négative déplace l'ombre vers la gauche.
La deuxième valeur correspond au décalage vertical entre l'ombre et le texte. Autrement dit, plus la valeur est élevée, plus l'ombre va vers le bas. Une valeur négative déplace l'ombre vers le haut.
La troisième valeur correspond au rayon de flou pour l'ombre, exprimé en pixel. Autrement dit, plus la valeur est élevée, plus l'ombre sera floue.
La quatrième valeur définit la couleur utilisée pour l'ombre.

Là aussi, n'hésitez pas à expérimenter et à essayer différentes valeurs pour voir ce que ça donne.

Centrer l'image

img {
  display: block;
  margin: 0 auto;
}

Dernière chose : on va centrer l'image pour que ce soit plus joli. On pourrait utilise margin: 0 auto comme on l'a fait avant mais on a besoin d'autre chose. L'élément body est un élément de bloc, cela signifie qu'il prend de l'espace et qu'on peut lui appliquer des marges et d'autres valeur pour l'espacement. En revanche, les images sont des éléments inline (ce qu'on pourrait traduire par « en ligne »), ce qui signifie qu'on ne peut pas leur appliquer ces valeurs d'espacement. Pour pouvoir appliquer des marges sur l'image comme pour un bloc, on utilise display: block; pour que l'image se comporte comme un élément de bloc.

Note : C'est tout à fait normal si vous ne comprenez pas complètement display: block; et les différences entre bloc et inline. Ça viendra plus tard, une fois que vous aurez plus utilisé CSS. Les différentes valeurs qu'on peut utiliser pour display sont expliquées sur la page de référence de la propriété display.

Conclusion

Si vous avez suivi les différentes étapes de cet article, vous devriez obtenir une page qui ressemble à celle-ci (vous pouvez aussi voir notre version finale ici) :

a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip.

Si vous êtes bloqué-e quelque part, vous pouvez toujours comparer votre travail avec le code final de cet exemple, disponible sur GitHub.

Dans cet article, nous n'avons fait qu'effleurer les bases de CSS. Pour continuer et en apprendre plus, vous pouvez vous rendre sur la page Apprendre CSS.