Mettre en place le CSS

La petite histoire du CSS

Je vous avais avertis dès le début de ce cours : nous allons apprendre deux langages. Nous avons déjà bien entamé notre découverte du HTML, même s'il reste encore de nombreuses choses à apprendre (nous y reviendrons dans quelques chapitres). En revanche, il est temps maintenant de nous intéresser au CSS.

CSS (Cascading Style Sheets), c'est cet autre langage qui vient compléter le HTML. Vous vous souvenez de son rôle ? Gérer la mise en forme de votre site.

Haut

Petit rappel: à quoi sert CSS ?

CSS ? C'est lui qui vous permet de choisir la couleur de votre texte. Lui qui vous permet de sélectionner la police utilisée sur votre site. Lui encore qui permet de définir la taille du texte, les bordures, le fond…

Et aussi, c'est lui qui permet de faire la mise en page de votre site. Vous pourrez dire : je veux que mon menu soit à gauche et occupe telle largeur, que l'en-tête de mon site soit calé en haut et qu'il soit toujours visible, etc.

Souvenez-vous de ce petit comparatif que nous avions vu dès le premier chapitre (figure suivante).

Grâce au HTML, nous avons pu rédiger le contenu de notre site mais il est brut de décoffrage. Le CSS vient compléter ce code pour mettre en forme tout cela et donner au contenu l'apparence que l'on souhaite.

Haut

CSS: des débuts difficiles

Il faut savoir qu'aux débuts du Web, CSS n'existait pas. En fait, il n'y avait initialement que le langage HTML.
Le HTML est né en 1991 et CSS en 1996. Alors, vous vous dites sûrement : comment faisait-on la mise en forme de 1991 à 1996 ? Eh bien, uniquement en HTML ! Il y avait en effet des balises HTML dédiées à la mise en forme.
<font color="#aab1c3">, par exemple, permettait de définir la couleur du texte.

Cependant, les pages HTML commençaient à devenir assez complexes. Il y avait de plus en plus de balises et c'était un joyeux mélange entre le fond et la forme, qui rendait la mise à jour des pages web de plus en plus complexe. C'est pour cela que l'on a créé le langage CSS.

Cependant, le CSS n'a pas été adopté immédiatement par les webmasters, loin de là. Il fallait se défaire de certaines mauvaises habitudes et cela a pris du temps. Encore aujourd'hui, on peut trouver des sites web avec des balises HTML de mise en forme, anciennes et obsolètes, comme <font> !

Haut

CSS: la prise en charge des navigateurs

Tout comme le HTML, le CSS a évolué. Je vous avais indiqué qu'il y avait quatre versions importantes de CSS:

• CSS 1;
• CSS 2.0;
• CSS 2.1;
• CSS 3.

À savoir!! En fait, la version CSS 3 n'est pas encore totalement finalisée (ce n'est pas encore une version officielle). Cependant, elle est bien avancée et aujourd'hui déjà bien prise en charge par de nombreux navigateurs, ce qui fait qu'on peut déjà s'en servir.
Il serait dommage de passer à côté car CSS 3 apporte de nombreuses fonctionnalités à CSS (leur nombre double par rapport à CSS 2.1 !). Nous nous baserons donc dans ce cours sur CSS 3, qui reprend et complète la plupart des fonctionnalités de CSS 2.1.

Ce sont les navigateurs web qui font le travail le plus complexe : ils doivent lire le code CSS et comprendre comment afficher la page.

Au début des années 2000, Internet Explorer était le navigateur le plus répandu mais sa gestion du CSS est longtemps restée assez médiocre (pour ne pas dire carrément mauvaise). C'était la grande époque de la version 6 (IE6).

Depuis, de nombreux navigateurs sont arrivés et ont chahuté Internet Explorer : Mozilla Firefox bien sûr, mais aussi Google Chrome. Et je ne vous parle pas du succès des Mac et iPhone avec leur navigateur Safari. Cela a incité Microsoft à réagir et publier (après une longue période d'inactivité) IE 7, puis IE 8 et IE 9, 10, 11... Et maintenant Edge.

Que faut-il retenir de tout cela ? Que les navigateurs ne connaissent pas toutes les propriétés CSS qui existent. Plus le navigateur est vieux, moins il connaît de fonctionnalités CSS.

Je vais vous présenter dans ce cours un certain nombre de fonctionnalités de CSS qui ne marchent pas forcément sur les navigateurs les plus vieux. Je ne peux pas l'éviter, c'est comme cela : aucun navigateur ne connaît parfaitement toutes les fonctionnalités CSS de toute façon ! Au pire, si le navigateur ne connaît pas une propriété CSS, il l'ignore et ne met pas en forme, mais cela ne fait pas planter votre page : celle-ci sera donc toujours lisible.

Je vous recommande fortement de mettre dans vos favoris le site www.caniuse.com qui propose des tables de compatibilité des fonctionnalités de HTML et CSS sur différents navigateurs (et sur leurs différentes versions) :

Haut

Où écrit-on le CSS ?

Vous avez le choix car on peut écrire du code en langage CSS à trois endroits différents:

• dans un fichier .css (méthode la plus recommandée);
• dans l'en-tête <head> du fichier HTML;
• directement dans les balises du fichier HTML via un attribut style(méthode la moins recommandée).

Je vais vous présenter ces trois méthodes mais sachez d'ores et déjà que la première… est la meilleure.

Haut

Dans un fichier .css (recommandé)

Comme je viens de vous le dire, on écrit le plus souvent le code CSS dans un fichier spécial ayant l'extension .css (contrairement aux fichiers HTML qui ont l'extension .html). C'est la méthode la plus pratique et la plus souple. Cela nous évite de tout mélanger dans un même fichier. J'utiliserai cette technique dans toute la suite de ce cours.

Commençons à pratiquer dès maintenant ! Nous allons partir du fichier HTML suivant:

                             1   <!DOCTYPE html>
 2   <html>
 3      <head>
 4          <meta charset="utf-8" />
 5          <link rel="stylesheet" href="style.css" />
 6          <title>Premiers tests du CSS</title>
 7      </head>
 8   
 9      <body>
10          <h1>Mon super site</h1>
11   
12          <p>Bonjour et bienvenue sur mon site !</p>
13          <p>Pour le moment, mon site est un peu <em>vide</em>. Patientez encore un peu !</p>
14      </body>
15   </html>
                        

Vous noterez le contenu de la ligne 5, <link rel="stylesheet" href="style.css" /> : c'est elle qui indique que ce fichier HTML est associé à un fichier appelé style.css et chargé de la mise en forme.

Enregistrez ce fichier sous le nom que vous voulez (par exemple page.html). Pour le moment, rien d'extraordinaire à part la nouvelle balise que nous avons ajoutée.

Maintenant, créez un nouveau fichier vide dans votre éditeur de texte (par exemple Sublime Text) et copiez-y ce bout de code CSS (rassurez-vous, je vous expliquerai tout à l'heure ce qu'il veut dire):

                            1   p
2   {
3       color: blue;
4   }
                        

Haut

À savoir!! Pour obtenir la coloration du code dans Sublime Text, enregistrez bien votre fichier avec l'extension .css d'abord.

Enregistrez le fichier en lui donnant un nom qui se termine par .css, comme style.css. Placez ce fichier .css dans le même dossier que votre fichier .html.

Dans Sublime Text, vous devriez observer quelque chose de similaire à la figure suivante.

Dans votre explorateur de fichiers, vous devriez les voir apparaître côte à côte. D'un côté le .html, de l'autre le .css, comme à la figure suivante.

Ouvrez maintenant votre fichier page.html dans votre navigateur pour le tester, comme vous le faites d'habitude. Regardez, c'est magique : vos paragraphes sont écrits en bleu, comme dans la figure suivante !

Attention!! Il est inutile d'ouvrir directement le fichier style.css dans le navigateur. Il faut ouvrir le fichier page.html (il fera automatiquement appel au fichier style.css).

Haut

Dans l'en-tête <head> du fichier HTML

Il existe une autre méthode pour utiliser du CSS dans ses fichiers HTML : cela consiste à insérer le code CSS directement dans une balise <style> à l'intérieur de l'en-tête <head>.

Voici comment on peut obtenir exactement le même résultat avec un seul fichier .html qui contient le code CSS (lignes 5 à 10) :

                             1   <!DOCTYPE html>
 2   <html>
 3      <head>
 4          <meta charset="utf-8" />
 5          <style>
 6              p
 7              {
 8                  color: blue;
 9              }
10          </style>
11          <title>Premiers tests du CSS</title>
12      </head>
13   
14      <body>
15          <h1>Mon super site</h1>
16   
17          <p>Bonjour et bienvenue sur mon site !</p>
18          <p>Pour le moment, mon site est un peu <em>vide</em>. Patientez encore un peu !</p>
19      </body>
20   </html>
                        

Testez, vous verrez que le résultat est le même.

Haut

Directement dans les balises (non recommandé)

Dernière méthode, à manipuler avec précaution: vous pouvez ajouter un attribut style à n'importe quelle balise. Vous insérerez votre code CSS directement dans cet attribut:

                             1   <!DOCTYPE html>
 2   <html>
 3      <head>
 4          <meta charset="utf-8" />
 5          <title>Premiers tests du CSS</title>
 6      </head>
 7   
 8      <body>
 9          <h1>Mon super site</h1>
10   
11          <p style="color: blue;">Bonjour et bienvenue sur mon site !</p>
12          <p>Pour le moment, mon site est un peu <em>vide</em>. Patientez encore un peu !</p>
13      </body>
14   </html>
                        

Cette fois, seul le texte du premier paragraphe (ligne 11), dont la balise contient le code CSS, sera coloré en bleu (figure suivante).

Haut

Quelle méthode choisir ?

Je vous recommande fortement de prendre l'habitude de travailler avec la première méthode parce que c'est celle utilisée par la majorité des webmasters… Pourquoi ?

Pour le moment, vous faites vos tests sur un seul fichier HTML. Cependant, votre site sera plus tard constitué de plusieurs pages HTML, on est d'accord ?
Imaginez : si vous placez le code CSS directement dans le fichier HTML, il faudra copier ce code dans tous les fichiers HTML de votre site ! Et si demain vous changez d'avis, par exemple si vous voulez que vos paragraphes soient écrits en rouge et non en bleu, il faudra modifier chaque fichier HTML un à un, comme le montre la figure suivante.

Si vous travaillez avec un fichier CSS externe, vous n'aurez besoin d'écrire cette instruction qu'une seule fois pour tout votre site, comme le montre la figure suivante.

Haut

Appliquer un style: sélectionner une balise

Maintenant que nous savons où placer le code CSS, intéressons-nous de plus près à ce code. Je vous ai donné, sans vous l'expliquer, un premier bout de code CSS:

                        1   p
2   {
3       color: blue;
4   }
                    

Dans un code CSS comme celui-ci, on trouve trois éléments différents:

• Des noms de balises: on écrit les noms des balises dont on veut modifier l'apparence. Par exemple, si je veux modifier l'apparence de tous les paragraphes <p> , je dois écrire p.
• Des propriétés CSS: les « effets de style » de la page sont rangés dans des propriétés. Il y a par exemple la propriété color qui permet d'indiquer la couleur du texte, font-size qui permet d'indiquer la taille du texte, etc. Il y a beaucoup de propriétés CSS et, comme je vous l'ai dit, je ne vous obligerai pas à les connaître toutes par cœur.
• Les valeurs: pour chaque propriété CSS, on doit indiquer une valeur. Par exemple, pour la propriété color, il faut indiquer le nom de la couleur. Pour font-size, il faut indiquer quelle taille on veut, etc.

Schématiquement, une feuille de style CSS ressemble donc à cela:

                         1   balise1
 2   {
 3      propriete1: valeur1;
 4      propriete2: valeur2;
 5      propriete3: valeur3;
 6   }
 7   
 8   balise2
 9   {
10      propriete1: valeur1;
11      propriete2: valeur2;
12      propriete3: valeur3;
13      propriete4: valeur4;
14   }
15   
16   balise3
17   {
18      propriete1: valeur1;
19   }
                    

Haut

Vous repérez dans cet extrait de code les balises, propriétés et valeurs dont je viens de vous parler.

Comme vous le voyez, on écrit le nom de la balise (par exemple h1) et on ouvre des accolades pour, à l'intérieur, mettre les propriétés et valeurs que l'on souhaite. On peut mettre autant de propriétés que l'on veut à l'intérieur des accolades. Chaque propriété est suivie du symbole « deux-points » ( : ) puis de la valeur correspondante. Enfin, chaque ligne se termine par un point-virgule ( ; ).

Je vous apprendrai de nombreuses propriétés dans les chapitres suivants. Pour le moment, dans les exemples, on va juste changer la couleur pour s'entraîner.

Le code CSS que nous avons utilisé jusqu'ici:

                        1   p
2   {
3       color: blue;
4   }
                    

… signifie donc en français: « Je veux que tous mes paragraphes soient écrits en bleu. ». Le résultat est visible à la figure suivante.

Essayez de changer le nom de la balise affectée par le code CSS. Par exemple, si j'écris h1, c'est le titre qui sera écrit en bleu. Modifiez votre fichier style.css comme ceci:

                        1   h1
2   {
3       color: blue;
4   }
                    

Maintenant, ouvrez à nouveau votre page HTML (souvenez-vous, c'est la page HTML qu'on ouvre dans le navigateur, pas le fichier CSS !) : vous devriez voir son titre s'afficher en bleu (figure suivante) !

Haut

Appliquer un style à plusieurs balises

Prenons le code CSS suivant:

                            1   h1
2   {
3       color: blue;
4   }
5   
6   em
7   {
8       color: blue;
9   }
                        

Il signifie que nos titres <h1> et nos textes importants <em> doivent s'afficher en bleu. Par contre, c'est un peu répétitif, vous ne trouvez pas?

Heureusement, il existe un moyen en CSS d'aller plus vite si les deux balises doivent avoir la même présentation. Il suffit de combiner la déclaration en séparant les noms des balises par une virgule, comme ceci:

                            1   h1, em
2   {
3       color: blue;
4   }
                        

Haut

Le résultat se trouve à la figure suivante.

Cela signifie : « Je veux que le texte de mes <h1> et <em> soit écrit en bleu ».

Vous pouvez indiquer autant de balises à la suite que vous le désirez.

Haut

Des commentaires dans du CSS

Comme en HTML, il est possible de mettre des commentaires. Les commentaires ne seront pas affichés, ils servent simplement à indiquer des informations pour vous, par exemple pour vous y retrouver dans un looong fichier CSS.

D'ailleurs, vous allez vous en rendre compte, en général le fichier HTML est assez court et la feuille CSS assez longue (si elle contient tous les éléments de style de votre site, c'est un peu normal). Notez qu'il est possible de créer plusieurs fichiers CSS pour votre site si vous ressentez le besoin de séparer un peu votre code CSS (en fonction des différentes sections de votre site, par exemple).

… De quoi on parlait déjà ? Ah oui, les commentaires en CSS.

Donc, pour faire un commentaire, c'est facile ! Tapez /*, suivi de votre commentaire, puis */ pour terminer votre commentaire.
Vos commentaires peuvent être écrits sur une ou plusieurs lignes. Par exemple:

                             1   /*
 2   style.css
 3   ---------
 4   
 5   Par Mathieu Nebra
 6   */
 7   
 8   p
 9   {
10      color: blue; /* Les paragraphes seront en bleu */
11   }
                        

Il est possible que j'utilise les commentaires dans la suite du cours, pour vous donner des explications à l'intérieur même des fichiers .css.

Haut

Appliquer un style: class et id

Ce que je vous ai montré jusqu'ici a quand même un défaut : cela implique par exemple que TOUS les paragraphes possèdent la même présentation (ici, ils seront donc tous écrits en bleu).

Comment faire pour que certains paragraphes seulement soient écrits d'une manière différente ? On pourrait placer le code CSS dans un attribut style sur la balise que l'on vise (c'est la technique que je vous ai présentée un peu plus tôt) mais, comme je vous l'ai dit, ce n'est pas recommandé (il vaut mieux utiliser un fichier CSS externe).

Pour résoudre le problème, on peut utiliser ces attributs spéciaux qui fonctionnent sur toutes les balises:

• l'attribut class;
• l'attribut id.

Que les choses soient claires dès le début : les attributs class et id sont quasiment identiques. Il y a seulement une petite différence que je vous dévoilerai plus bas.
Pour le moment, et pour faire simple, on ne va s'intéresser qu'à l'attribut class.

Comme je viens de vous le dire, c'est un attribut que l'on peut mettre sur n'importe quelle balise, aussi bien titre que paragraphe, image, etc.

                        1   <h1 class=""> </h1>
2   <p class=""> </p>
3   <img class=""/>
                    

Haut

En fait, vous devez écrire un nom qui sert à identifier la balise. Ce que vous voulez, du moment que le nom commence par une lettre.

Par exemple, je vais associer la classe introduction à mon premier paragraphe (ligne 12):

                         1   <!DOCTYPE html>
 2   <html>
 3      <head>
 4          <meta charset="utf-8" />
 5          <link rel="stylesheet" href="style.css" />
 6          <title>Premiers tests du CSS</title>
 7      </head>
 8   
 9      <body>
10          <h1>Mon super site</h1>
11   
12          <p class="instruction">Bonjour et bienvenue sur mon site !</p>
13          <p>Pour le moment, mon site est un peu <em>vide</em>. Patientez encore un peu !</p>
14      </body>
15   </html>
                    

Maintenant que c'est fait, votre paragraphe est identifié. Il a un nom: introduction. Vous allez pouvoir réutiliser ce nom dans le fichier CSS pour dire : « Je veux que seules les balises qui ont comme nom 'introduction' soient affichées en bleu ».

Pour faire cela en CSS, indiquez le nom de votre classe en commençant par un point, comme ci-dessous:

                        1   .instruction
2   {
3       color: blue;
4   }
                    

Testez le résultat : seul votre paragraphe appelé introduction va s'afficher en bleu (figure suivante) !

Haut

id fonctionne exactement de la même manière que class, à un détail près : il ne peut être utilisé qu'une fois dans le code.

Quel intérêt ? Il y en a assez peu pour tout vous dire, cela vous sera utile si vous faites du JavaScript plus tard pour reconnaître certaines balises. D'ailleurs, nous avons déjà vu l'attribut id dans le chapitre sur les liens (pour réaliser des ancres). En pratique, nous ne mettrons des id que sur des éléments qui sont uniques dans la page, comme par exemple le logo:

                        1   <img src="images/logo.png" alt="Logo du site" id="logo" />
                    

Si vous utilisez des id, lorsque vous définirez leurs propriétés dans le fichier CSS, il faudra faire précéder le nom de l'id par un dièse (#):

                        1   #logo
2   {
3       /* Indiquez les propriétés CSS ici */
4   }
                    

Je ne vous propose pas de le tester, cela fonctionne exactement comme class.

À savoir!! Si vous vous emmêlez les pinceaux entre class et id retenez que deux balises peuvent avoir le même nom avec l'attribut class. Un nom d'id doit en revanche être unique dans la page HTML.

Haut

Les balises universelles

Il arrivera parfois que vous ayez besoin d'appliquer une class (ou un id) à certains mots qui, à l'origine, ne sont pas entourés par des balises.

En effet, le problème de class, c'est qu'il s'agit d'un attribut. Vous ne pouvez donc en mettre que sur une balise. Si, par exemple, je veux modifier uniquement « bienvenue » dans le paragraphe suivant:

                            1   <p>Bonjour et bienvenue sur mon site !</p>
                        

Cela serait facile à faire s'il y avait une balise autour de « bienvenue » mais, malheureusement il n'y en a pas. Par chance, on a inventé… la balise-qui-ne-sert-à-rien.

En fait, on a inventé deux balises dites universelles, qui n'ont aucune signification particulière (elles n'indiquent pas que le mot est important, par exemple). Il y a une différence minime (mais significative !) entre ces deux balises:

• <span> </span> : c'est une balise de type inline, c'est-à-dire une balise que l'on place au sein d'un paragraphe de texte, pour sélectionner certains mots uniquement. Les balises <strong> et <em> sont de la même famille. Cette balise s'utilise donc au milieu d'un paragraphe et c'est celle dont nous allons nous servir pour colorer « bienvenue ».


• <div> </div> : c'est une balise de type block, qui entoure un bloc de texte. Les balises <p>, <h1>, etc. sont de la même famille. Ces balises ont quelque chose en commun : elles créent un nouveau « bloc » dans la page et provoquent donc obligatoirement un retour à la ligne. <div> est une balise fréquemment utilisée dans la construction d'un design, comme nous le verrons plus tard.

Haut

Pour le moment donc, nous allons utiliser plutôt la balise <span>. On la met autour de « bienvenue », on lui ajoute une classe (du nom qu'on veut), on crée le CSS et c'est gagné !

                            1   <p>Bonjour et <span class="salutations">bienvenue</span> sur mon site !</p>
                        

                            1   .salutations
2   {
3       color: blue;
4   }
                        

Vous pouvez voir le résultat à la figure suivante.

Haut

Appliquer un style : les sélecteurs avancés

En CSS, le plus difficile est de savoir cibler le texte dont on veut changer la forme. Pour cibler (on dit « sélectionner ») les éléments de la page à modifier, on utilise ce qu'on appelle des sélecteurs. Vous en avez déjà utilisé quelques-uns un peu plus tôt dans ce chapitre, résumons-les pour commencer.

Les sélecteurs que vous connaissez déjà

Ces sélecteurs, que nous avons vus précédemment, sont de loin les plus couramment utilisés. Il faut les connaître par cœur. Commençons par la base de la base:

                            1   p
2   {
3   
4   }
                        

… signifie « Je veux toucher tous les paragraphes ». Après, c'est à vous de dire ce que vous faites à ces paragraphes (vous les écrivez en bleu, par exemple).

Nous avons aussi vu:

                            1   h1, em
2   {
3   
4   }
                        

… qui signifie « Tous les titres et tous les textes importants ». Nous avons sélectionné deux balises d'un coup.

Et enfin, nous avons vu comment sélectionner des balises précises à qui nous avons donné un nom grâce aux attributs class et id:

                            1   .class
2   {
3   
4   }
5   
6   #id
7   {
8   
9   }
                        

Vous savez quoi ? Il existe des dizaines d'autres façons de cibler des balises en CSS ! Nous n'allons pas toutes les voir car il y en a beaucoup et certaines sont complexes, mais voici déjà de quoi vous permettre d'être plus efficaces en CSS !

Haut

Les sélecteurs avancés

* : sélecteur universel

                                1   *
2   {
3   
4   }
                            

Sélectionne toutes les balises sans exception. On l'appelle le sélecteur universel.

A B : une balise contenue dans une autre

                                1   h3 em
2   {
3   
4   }
                            

Sélectionne toutes les balises <em> situées à l'intérieur d'une balise <h3>. Notez qu'il n'y a pas de virgule entre les deux noms de balises.

Exemple de code HTML correspondant:

                                1   <h3>Titre avec <em>texte important</em></h3>
                            

Haut

A + B : une balise qui en suit une autre

                                1   h3 + p
2   {
3   
4   }
                            

Sélectionne la première balise <p> située après un titre <h3>.

Exemple:

                                1   <h3>Titre</h3>
2   
3   <p>Paragraphe</p>
                            

A[attribut] : une balise qui possède un attribut

                                1   a[title]
2   {
3   
4   }
                            

Sélectionne tous les liens <a> qui possèdent un attribut title.

Exemple:

                                1   <a href="http://site.com" title="Infobulle" >
                            

Haut

A[attribut="Valeur"] : une balise, un attribut et une valeur exacte

                                1   a[title="Cliquez ici"]
2   {
3   
4   }
                            

Idem, mais l'attribut doit en plus avoir exactement pour valeur « Cliquez ici ».

Exemple :

                                1   <a href="http://site.com" title="Cliquez ici" >
                            

A[attribut*="Valeur"] : une balise, un attribut et une valeur

                                1   a[title*="ici"]
2   {
3   
4   }
                            

Idem, l'attribut doit cette fois contenir dans sa valeur le mot « ici » (peu importe sa position).

Exemple :

                                1   <a href="http://site.com" title="Quelque part par ici" >
                            

D'autres sélecteurs existent !

Je ne vous ai présenté ici qu'une partie des sélecteurs CSS mais sachez qu'il en existe beaucoup d'autres. Si vous voulez une liste complète, vous pouvez vous renseigner directement à la source : sur le site du W3C ! C'est très complet.

Sachez que nous découvrirons certains de ces autres sélecteurs dans la suite de ce cours !

Haut