12 - CSS

Introduction

Les feuilles de style en cascade, généralement appelées CSS de l’anglais Cascading Style Sheets, forment un langage informatique qui décrit la présentation des documents HTML et XML. Les standards définissant CSS sont publiés par le World Wide Web Consortium (W3C). Introduit au milieu des années 1990, css devient couramment utilisé dans la conception de sites web et bien pris en charge par les navigateurs web dans les années 2000.

L’utilisation de ces deux langages, CSS et HTML, répond à un principe de séparation du fond et de la forme qui est utilisé depuis longtemps dans le monde de l’édition. D’abord on écrit du contenu (le fond), ensuite, on met en forme le contenu.

Le document HTML décrit le contenu du document : le fond, et le document css décrit sa forme.

Intégration de code CSS dans une page html

Il existe trois façons d’ajouter des règles CSS à une page.

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

On écrit le code CSS dans un fichier avec l’extension .css, par exemple style.css et on la lie dans l’en-tête du fichier HTML.

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

C’est la méthode préférée lorsque l’on a un ensemble de pages qui contiennent des styles identiques, cela permet d’alléger l’écriture du code et les requêtes vers le serveur de documents.

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

On intègre le code CSS au sein de balises <style> dans l’entête du document.

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

Méthode pratique lorsque l’on a des documents HTML d’une seule page ou avec des styles spécifiques.

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

On utilise alors l’attribut style au sein de la balise ouvrante de l’élément à styler.

<p style="color: red; font-weight: bold;">
    Maintenant mon texte est écrit en rouge et en gras.
</p>

Cette méthode est peu recommandée car on mélange le fond et la forme, et aussi parce que cela rend le code HTML plus illisible qu’il ne l’est !

Syntaxe

Une règle CSS est constituée d’un sélecteur suivi d’un bloc de déclaration entre accolades. Chaque déclaration se termine par un point-virgule.

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

Remarque. Les points-virgules sont obligatoires, mais pas l’indentation, elle est cependant conseillée pour rendre le code plus lisible.

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 .

Commentaires

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

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.

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>

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.


11 - HTML 13 - IHM Web