12 - CSS

Introduction

Une page Web repose sur deux langages qui se partagent le travail. Le HTML dit ce que contient la page : un titre, des paragraphes, une liste, une image. Le CSS (Cascading Style Sheets, feuilles de style en cascade) dit comment l’afficher : couleurs, polices, tailles, marges, disposition à l’écran.

Cette séparation du fond et de la forme a un grand avantage : on peut changer toute l’apparence d’un site en modifiant un seul fichier CSS, sans toucher au contenu des pages. C’est aussi ce qui permet d’afficher la même page différemment sur un ordinateur et sur un téléphone.

Le CSS est apparu au milieu des années 1990. Comme le HTML, il est normalisé par le W3C (World Wide Web Consortium), l’organisme qui fixe les règles du Web, et tous les navigateurs actuels le comprennent.

Intégration de code CSS dans une page html

Les règles CSS peuvent être placées à trois endroits différents.

Première méthode (recommandée) : utilisation d’une feuille de style externe

Les règles sont rangées dans un fichier à part, d’extension .css (par exemple style.css). Chaque page HTML indique dans son en-tête, avec une balise <link>, qu’elle utilise ce fichier :

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

Toutes les pages d’un site peuvent partager le même fichier : on écrit chaque règle une seule fois, et le navigateur, qui garde le fichier en mémoire après la première page, n’a plus besoin de le redemander au serveur.

Deuxième méthode : utilisation d’une feuille de style interne

Les règles sont écrites dans la page elle-même, entre les balises <style> et </style>, dans l’en-tête :

<head>
    <style>
        body {
              background-color: linen;
             }
        h1 {
            color: maroon;
            margin-left: 40px;
            }
    </style>
</head>

Cette méthode convient à une page isolée, ou à quelques règles qui ne concernent qu’une seule page du site.

Troisième méthode (à éviter) : insertion directe dans les balises HTML

La règle est écrite directement dans la balise concernée, grâce à l’attribut style :

<p style="color: red; font-weight: bold;">
    Ce paragraphe s'affiche en rouge et en gras.
</p>

On mélange alors à nouveau le fond et la forme : le HTML devient difficile à lire, et pour changer la couleur de tous les paragraphes il faudrait modifier chaque balise une par une.

Syntaxe

Une règle CSS commence par un sélecteur, qui désigne les éléments concernés. Viennent ensuite, entre accolades, des déclarations de la forme propriété: valeur;, une par ligne.

selecteur de balises {
    propriete: valeur;
    propriete2: valeur2;
    ...
}

Remarque. Le point-virgule qui sépare deux déclarations est obligatoire : s’il manque, le navigateur ignore la déclaration suivante. Les retraits et les retours à la ligne, eux, ne changent rien au résultat, mais rendent le code beaucoup plus facile à relire.

Les sélecteurs

Pour préciser quelles balises doivent être mises en forme dans le document HTML, on utilise des sélecteurs. Par exemple :

• p sélectionnera toutes les balises paragraphe p;
• h1, h3 sélectionnera toutes les balises h1 et h3;
• body sélectionnera tout le contenu de la page web.

Le bloc de déclaration

Il s’agit des règles de style à appliquer sur les élements sélectionnés. Par exemple :

p {
    color: red;
    text-align: center;
}

Cette règle permet de colorier en rouge et de centrer tous les paragraphes du document HTML.

L’ensemble des propriétés CSS est documenté, en français, sur MDN .

Les polices de caractères

La propriété font-family reçoit une liste de polices séparées par des virgules. Le navigateur utilise la première police de la liste qui est installée sur l’ordinateur du visiteur ; si aucune ne l’est, il se rabat sur le dernier mot-clé, qui désigne une famille générique :

• serif : une police avec empattement, c’est-à-dire avec les petits traits qui terminent les lettres (comme Times) ;
• sans-serif : une police sans empattement (comme Arial) ;
• monospace : une police à chasse fixe, dans laquelle toutes les lettres ont la même largeur (comme Courier).

body {
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
}

Commentaires

Les commentaires utilisent la syntaxe suivante: /* Un commentaire */

Sélecteurs plus élaborés

Il est possible de sélectionner plusieurs balises à la fois pour leur appliquer une règle commune, ces balises doivent alors être séparées par des virgules.

h1, h2, h3 {
    color: lime;
}

La virgule est très importante, car si on sépare les sélecteurs par des espaces il s’agit d’une sélection par descendence. Le code css suivant par exemple ne sélectionne que les paragraphes contenus dans une balise div.

div p {
    background-color: red;
}

Pour appliquer un même style à plusieurs éléments on peut leur ajouter un attribut HTML class="ma-classe", qui pourra être sélectionné en css avec le sélecteur .ma-classe.

Pour appliquer un style specifique à un unique élément on lui ajoute un attribut HTML id="mon-id", qui pourra être sélectionné en css avec le sélecteur #mon-id.

Classe ou id ?

Problème 1

Comment changer le style d’un seul paragraphe à l’exclusion de tous les autres ?

La notion d’id (syntaxe : #mon_id)

Fichier CSS

#mon_par_de_police_rouge {
    color: red;
}

#mon_par_au_fond_bleu {
    background-color: cyan;
}

Fichier HTML

<p id="mon_par_de_police_rouge">
Pellentesque dapibus suscipit ligula.  Donec posuere augue in quam.  Etiam vel tortor sodales tellus ultricies commodo.  Suspendisse potenti.  Aenean in sem ac leo mollis blandit.
</p>

<p>
Phasellus at dui in ligula mollis ultricies.  Integer placerat tristique nisl.  Praesent augue.  Fusce commodo.  Vestibulum convallis, lorem a tempus semper, dui dui euismod elit, vitae placerat urna tortor vitae lacus.
</p>

<p id="mon_par_au_fond_bleu">
Mauris mollis tincidunt felis.  Aliquam feugiat tellus ut neque.  Nulla facilisis, risus a rhoncus fermentum, tellus tellus lacinia purus, et dictum nunc justo sit amet elit.
</p>

Problème 2

Comment changer le style de quelques paragraphes mais pas de tous ?

La notion de classe (syntaxe : .ma_classe)

Fichier CSS

.italique {
    font-style: italic;
}

.gras {
    font-weight: bold;
}

#mon_intro {
    text-transform: uppercase;
}

Fichier HTML

<p class="italique" id="mon_intro">
Pellentesque dapibus suscipit ligula.  Donec posuere augue in quam.  Etiam vel tortor sodales tellus ultricies commodo.  Suspendisse potenti.  Aenean in sem ac leo mollis blandit.
</p>

<p class="gras">
Phasellus at dui in ligula mollis ultricies.  Integer placerat tristique nisl.  Praesent augue.  Fusce commodo.
</p>

<p class="italique gras">
Mauris mollis tincidunt felis.  Aliquam feugiat tellus ut neque.  Nulla facilisis, risus a rhoncus fermentum, tellus tellus lacinia purus, et dictum nunc justo sit amet elit.
</p>

Ordre d’application des règles

Ce n’est pas pour rien qu’on parle de feuilles de styles en cascade, car en fait la difficulté en CSS est souvent que l’on définit des règles différentes pour des tags identiques, et qu’il faut savoir quelle règle va s’appliquer sur notre élément.

Quand plusieurs règles s’appliquent au même élément, la plus spécifique l’emporte, par ordre croissant : règle sur un élément (p), puis sur une classe (.note), puis sur un identifiant (#menu), puis style en ligne dans la balise. À spécificité égale, c’est la dernière règle lue qui gagne, qu’elle vienne d’une feuille externe ou interne.

Déboguer son code CSS

Inspecteur de styles du navigateur

Pour savoir quelle règle a été utilisée par le navigateur, la console web du navigateur est d’un grand secours. On peut par exemple inspecter un élément et savoir quelles règles CSS s’appliquent et quelles règles CSS ont été supplantées (elles apparaissent barrées dans l’inspecteur de styles).

Validation du code css

Le site du W3C propose comme pour le language HTML un validateur de fichier CSS.