Cette image représente des lignes de code CSS sur un écran d'ordinateur

Episode 2 - Les CSS

Catégorie : technique, code

Niveau : débutant

Temps de lecture estimé : ~8 minutes

 

Cet article est le second de la série “De quoi est composé un site web”, qui a pour but de vous détailler les différents éléments d’un site internet. Dans l’article précédent, nous avons étudié les fichiers HTML. Dans cet article, nous continuons à voir les fichiers statiques avec le langage CSS.

 

Présentation

CSS est une abréviation de l’expression anglaise Cascading Style Sheets, ou en français, feuilles de style en cascade. Ce langage est fait pour définir tout ce qui touche à l’apparence de la page web (couleurs, polices de caractères, etc…).

 

exemple css

Exemple de CSS

 

L’attribut “style”

Les CSS permettent d’ajouter un style spécifique a des balises, par l’intermédiaire de propriétés (ex: color, pour changer la couleur) et de valeurs (ex: rouge).

Si par exemple je souhaites modifier ma page créée précédemment, et afficher le titre h1 en rouge, il me suffit d’ajouter l’attribut style au niveau de la balise <h1>, et de lui assigner comme valeur la chaîne de caractères suivante :

color: red

exemple style css html

Page HTML modifiée avec une balise contenant un attribut style

 

Si je sauvegarde mon fichier test.html, et que dans mon navigateur, je recharge la page, voici le résultat :

exemple style css

Rendu à l’écran de cette page HTML, avec le titre en rouge

 

Pour plus d’informations sur la liste des propriétés CSS existantes, cliquez içi : https://developer.mozilla.org/fr/docs/Web/CSS/Reference

 

Note : on peut ajouter plusieurs chaînes “propriété: valeur” dans une même balise style, en les séparant par des “;”

ex: style=”color:red; font-family:Arial; text-decoration:underline”

exemple style css html 2

 

Si je sauvegarde encore mon fichier test.html, et que dans mon navigateur, je recharge la page, je vois que cela a bien fonctionné :

exemple style css 3

Rendu à l’écran de cette page HTML, avec le titre en rouge, écrit en police Arial et souligné

 

Mettons que maintenant je souhaite rajouter un paragraphe dans ma page HTML

exemple style css html 3

 

Plus haut, nous avons vu comment modifier l’apparence d’une balise spécifique. Mais imaginons que je souhaite modifier l’apparence de tous les liens de ma page, par exemple les écrire en vert.

Je pourrais rajouter un attribut style=”color:green” sur mes 2 balises a.

 

exemple css html 4

 

C’est tout à fait valable, et d'ailleurs, si je recharge la page après avoir sauvegardé, j'obtiens bien le résultat souhaité.

exemple css 4

 

Cela pose tout de même un problème car nous avons dupliqué du code à 2 endroits différents. Et si demain, je souhaite par exemple modifier la couleur de mes liens en bleu, je devrais penser à le faire aux 2 endroits différents.

Sur un exemple simple comme celui-ci, avec une seule page comportant 2 liens, c’est largement faisable, mais sur un site plus complexe, si je devais modifier la couleur de tous les liens de toutes les pages de mon site, cela pourrait s’avérer être beaucoup plus long.

Les développeurs, qui n’aiment pas ni les choses fastidieuses et répétitives, ont pensé à tout !

 

La balise “style”

Il est possible de définir dans la balise <head> de votre page html une balise <style>, dont la fonction est de centraliser les propriétés CSS associées à telle ou telle balise.

Note : nous verrons par la suite que ce n’est pas forcément très conseillé d’utiliser cette méthode mais il est tout de même utile de comprendre son fonctionnement.

Cette balise <style>, sera donc placée dans la balise <head>, et une seule fois par page web (et non plus sur chaque balise comme précédemment). Le but est ici de centraliser les informations de même type au même endroit (structure dans le HTML, l’apparence dans les CSS), et d’éviter de mélanger les deux.

Si l’on reprend notre exemple précédent, et que l’on transfère les propriétés (qui étaient auparavant dans la balise <h1> et dans les balises <a>) dans cette nouvelle balise <style> en haut de page, voici ce que nous obtenons :

exemple css html 5

Exemple de page web contenant une balise "style"

 

Cette fois-ci, nous écrivons réellement dans le langage CSS. Comme vous pouvez le voir, une instruction CSS est constituée de cette manière :

sélecteur {

    propriete: valeur;

    propriete: valeur;

    …

}

Les propriétés et valeurs sont alors attribués à un sélecteur, délimité par des accolades : “{“ et “}”.

 

Les sélecteurs

Les sélecteurs peuvent être de différents types :

  • une balise HTML : Lorsque l’on souhaite attribuer un même style à un ensemble de balises.

    Par exemple, pour écrire tous les balises a de notre page en vert, nous avons écrit :

a {

    color: green;

}

Si l’on essaye de transcrire cette instruction CSS en français, on pourrait dire : Associer la couleur verte à toutes les balises <a> de la page.

Si vous essayez ce nouveau code, à l’écran vous aurez toujours le même rendu que précédemment. Ce qui est normal car nous avons simplement transféré les instructions de style (qui étaient auparavant mélangées dans les balises) à un seul et même endroit, c’est à dire dans la balise <style> dans la balise <head>.

Note : le contenu de la balise <head> n’est pas visible par l’internaute. Je vous disais précédemment que certaines balises n’étaient interprétées que par les navigateurs ou moteurs de recherche : c’est le cas de la balise <head>.

 

  • une classe. Si on souhaite attribuer une même apparence à une ou plusieurs balises bien définies, mais pas toutes, on ne peut plus utiliser la notation précédente (avec la balise HTML).

Par contre, on peut utiliser une classe. Elle permet d’identifier une ou plusieurs balises bien précisément au niveau du HTML, et d’y associer l’apparence que l’on souhaite côté CSS.

Si je reprend notre exemple précédent, et que cette fois je souhaite modifier la couleur du lien vers Google (en marron par exemple), mais pas celui vers Yahoo. Je ne peux pas faire comme précédemment et utiliser la notation avec une balise (qui elle, affectera tous les liens de la page).

Note : Par contre, je pourrais tout à fait utiliser la première méthode et rajouter l’attribut style=”color: brown” sur la balise a en question. Cela dit, cela est considéré comme étant plutôt une mauvaise pratique, étant donné que l’on mélange structure (HTML) et apparence (CSS) dans un même fichier.

Ce que l’on peut faire cependant, c’est ajouter simplement un attribut class dans le HTML, qui va identifier notre balise lien allant vers Google, pour la différencier de l’autre.

<a class="lien_google" href="http://google.fr">Aller sur Google</a>

Telle que nous l’avons définie ici, notre classe s’appelle donc lien_google.

Si l’on teste dans le navigateur le résultat, rien ne va changer. C’est normal car nous n’avons pas encore associé de style particulier à notre classe.

Pour cela, il nous suffit de rajouter l’instruction suivante dans la balise <style>, à la suite des autres déjà présentes.

.lien_google {

        color: brown;             

}

Ici, le sélecteur n’est plus une balise, mais une classe (avec un “.” devant le nom de notre classe)

Pour référence, voici le code complet :

exempel css html 6

 

Et si l’on sauve notre fichier HTML, et que l’on recharge notre navigateur, on peut constater que notre lien vers Google a bien changé de couleur.

exemple css 6

 

  • un ID (ou identifiant). Cette méthode permet d’identifier un seul élément, et de manière similaire à la classe, il doit faire référence à un attribut “id” dans une balise. La différence avec la classe est que l’id est prioritaire à celle-ci, et permet de “prendre le pas” sur les autres instructions, qui auraient éventuellement été définies avant.

Si l’on reprend notre exemple avec le lien, et que l’on change la classe par un id :

<a id="lien_google" href="http://google.fr">Aller sur Google</a>

Et au niveau de la CSS :

#lien_google {

        color: brown;

}

Ici, le sélecteur n’est plus une classe, mais un ID (avec un “#” devant le nom de notre id)

Attention : comme dit précédemment, il est très important que vous n’ayez qu’une seule balise dans votre page comportant cette attribut id.

Note : Généralement, j’évite d’utiliser des ids dans la CSS, car iI peut introduire des effets non désirés. Je préfère utiliser systématiquement des classes, et laisser les ids pour le Javascript.


L’héritage et sélecteurs parents/enfants

Toujours dans notre exemple, le titre h1 est écrit en police Arial, mais pas le reste de la page. Si je souhaite modifier la police dans le reste de la page, je pourrais créer un sélecteur pour la balise p, et lui donner la police souhaitée.

p {

        font-family:Arial;

}

 Le problème de cette méthode est que nous allons devoir faire cela pour quasiment toutes les balises existantes dans la page (et nous allons encore une fois nous répéter). Pour remédier à ce problème, nous pouvons utiliser le fait que le HTML est un langage de balises, et qui comme nous l’avons vu précédemment permet l’imbrications de celles-ci.

<body>

       <div class="content">

            <h1>Titre de la deuxième page web</h1>

            <p>

                Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br/>

                Molestias, consequuntur iure inventore, deserunt itaque<br/>

                unde recusandae debitis voluptatum autem ipsam modi<br/>

                enim accusamus, neque sint optio doloribus quae eos quod?

            </p>

            ….

      </div>

</body>

Ici, vous pouvez voir que des balises sont décalées par rapport à d’autres. Elles sont en fait à l’intérieur d’autres balises (on dit qu’elles sont des balises “enfants”), et les développeurs marquent une “indentation” pour faciliter la lecture du code.

Ce que nous pouvons faire pour définir la police d’un seul coup pour toute la page, c’est définir la propriété sur la balise parent de toutes les autres : la balise body.

body {

        font-family:Arial;

}

De cette manière, toutes les balises enfants de body (donc tout le contenu de notre page web) vont hériter de cette propriété, et ainsi recevoir la police Arial.

Cette notion d’héritage permet ainsi d’organiser et de structurer nos styles, en commençant par exemple par les styles globaux sur la balise body (couleur du texte, police de caractères, taille etc…), puis en allant vers des sélecteurs de plus en plus précis (ex: “.content”, ou “.footer”), et surtout d’éviter de dupliquer trop d’instructions.

 

Les feuilles de styles

Nous avons vu comment modifier le style d’une ou plusieurs balises sur une page web. Imaginons maintenant que nous souhaitions créer une nouvelle page web avec un autre contenu.

Pour cela, je vais dupliquer le fichier test.html dans un nouveau fichier test2.html et modifier le contenu comme ceci :

exemple css html 7

J’ai simplement modifié le titre de la page, et rajouté un paragraphe. Vous devez avoir remarqué qu’en faisant cela, nous avons dupliqué la balise style contenant toute la CSS de notre site internet ! Et en développement web, la duplication est rarement une bonne chose.

En effet, et comme précédemment, si demain vous souhaitez changer la couleur de toutes les balises h1 de votre site internet, vous devrez effectuer la modification dans toutes vos pages.

Pour cela, nous allons utiliser une feuille de style (d’où le nom “style sheet” en anglais).

Une feuille de style est simplement un fichier, avec l’extension .css, qui regroupe des instructions CSS (dans notre cas, celles qui étaient auparavant dans la balise style. Cependant nous avons vu les limitations de cette méthode avec la duplication entre les pages).

L’avantage de tout déplacer notre CSS existante dans un fichier externe est que nous pourrons faire référence à ce même fichier dans toutes nos pages HTML !

Pour ce faire, copiez toutes les instructions CSS de votre balise style dans un fichier séparé, que vous pourrez appeler style.css par exemple, et sauvegardez le au même endroit que votre page web.

 

exemple css 8

 

Ensuite, dans votre fichier HTML, rajoutez simplement une nouvelle balise link, qui va faire référence à notre nouveau fichier css :

<link rel="stylesheet" href="style.css">

Note : l’attribut href fait référence à notre fichier que nous venons de créer : style.css

Il ne reste plus qu’a supprimer le contenu de notre balise style, qui ne sert plus à rien maintenant.

exemple css html 9

 

Et si vous sauvegardez et rechargez votre navigateur, vous ne devriez voir aucune différence avec précédemment, c’est tout à fait normal !

Le but est encore une fois, de séparer la structure (code HTML) et l’apparence (code CSS) de votre page. Là c’est clairement le cas, puisque nous avons fait 2 fichiers séparés.

Note : vous pouvez faire la même chose avec notre première page test.html, et faire référence à la même feuille de style (style.css).

 Dans l’article suivant, nous traiterons des fichiers images.