Introduction à CSS

Alexandre Niveau
GREYC — Université de Caen
NB:
  • on n'utilise que des couleurs nommées dans ce cours
  • on reste en px/pourcentages pour les longueurs
RÉCUPÉRER LES PARTIES COMMENTÉES POUR LES REMETTRE PLUS TARD

L'âge sombre du HTML

Au début du web, un seul langage : HTML
  • Pas de séparation entre contenu et mise en forme
  • Balises <font>, <big>, <b>, <i>, <center>, attributs color et bgcolor
  • un exemple de page de cette époque, toujours en ligne (regarder le code source)
  • à voir : balises en majuscules, center/font/etc., tableaux, utilisation d'images pour les titres…

Très rapidement, les limites de cette approche se font sentir.

En 1996, apparition du langage CSS, cascading style sheets : sépare proprement du HTML tout ce qui concerne la présentation, et non le contenu

lancer démo avant de montrer le slide

Modifier l'apparence d'un élément HTML

Attribut style
<h1 style="color:red; font-style:italic;">Mon titre</h1>

Contient un ou plusieurs couples propriété-valeur, séparés par des points-virgules (ici color:red et font-style:italic)

Le nom de la propriété est séparé de la valeur par un deux-points : ici on a donc
  • la valeur red pour la propriété color
  • la valeur italic pour la propriété font-style

Résultat : le titre sera rouge et en italique

Quelques propriétés CSS

Il y a de nombreuses propriétés CSS (une liste ici)

Vous allez en découvrir une bonne partie dans ce cours, souvent par vous-mêmes

Quelques-unes des plus simples à comprendre :
  • color, couleur du texte (ex. color: blue)
  • background-color, couleur du fond (ex. background-color: black)
  • font-family, police du texte (ex. font-family: Verdana)
  • font-size, taille de la police (ex. font-size: 120%)
  • font-style, style de la police (ex. font-style: italic)
  • font-weight, graisse de la police (ex. font-weight: bold)
  • border, cadre autour de l'élément (ex. border: 1px solid black)
  • text-align, contrôle l'alignement du texte (ex. text-align: center)
  • text-decoration, décoration du texte (ex. text-decoration: underline)

Noter dans les exemples que ces propriétés ont des valeurs assez différentes : on ne peut pas deviner comment une propriété fonctionne juste en regardant son nom !

Inconvénients de l'attribut style

Il est très rare de vouloir appliquer un style à un unique élément : en général on veut un style pour les titres, un style pour les paragraphes, un style pour les liens, etc.

Si on utilise les attributs style, il faut recopier un même style à de nombreux endroits différents
  • risque d'erreur (incohérences)
  • alourdit énormément le HTMLNB: les styles sont souvent compliqués !
  • difficile à maintenir : changer un style est très fastidieux et risque d'introduire des erreurs
  • impossible de changer de style dans un contexte différent (ex. impression sur papier)
Enfreint deux principes fondamentaux en informatique :
  • factorisation du code (principe parfois appelé DRY, don't repeat yourself)
  • séparation entre sémantique et présentation
on retrouve les mêmes pb qu'avec le HTML d'avant 1996

Règles CSS

CSS permet de déclarer des règles

On les met dans un élément style dans l'en-tête du document, ou alors dans une feuille de style externe

Exemple de règle, qui met tous les titres de premier niveau en rouge et en italique :
h1 {
    color: red;
    font-style: italic;
}
Une règle est constituée :
  • d'un sélecteur (ici h1), qui choisit à quels éléments s'applique la règle ;
  • et d'une liste de couples propriété-valeur entre accolades
faire qq démos avec balise style

Feuilles de style externes

Centralisation des styles

Règles CSS dans l'en-tête = document plus facile à maintenir…

… mais il faut recopier toutes les règles pour chaque page web du site

ne respecte pas le principe DRY
Solution : créer une feuille de style CSS, c'est-à-dire un fichier qui ne contient que des règles CSS, et lier chaque page du site à cette feuille de style
<link rel="stylesheet" href="mon_style.css" />
démo

Puissance de CSS

Feuille de style commune à toutes les pages d'un site ⇒ une seule ligne à changer pour changer la couleur des titres de toutes les pages

Inversement, à partir d'une même page HTML, on peut obtenir des rendus extrêmement variés en changeant simplement le lien vers la feuille de style

Démonstration : CSS Zen Garden

Avantage important : facilite énormément l'adaptation du contenu à des contextes différents. Exemple de l'impression :
<link rel="stylesheet" href="ecran.css" media="screen" />
<link rel="stylesheet" href="papier.css" media="print" />
L'attribut media de l'élément link indique à quel média s'applique la feuille de style

Autre intérêt des feuilles de style

Les navigateurs (et les proxys) utilisent un mécanisme de cache : ils gardent en mémoire les pages visitées, pour éviter de les télécharger à nouveau quand l'internaute y retourne

Les feuilles de style permettent d'exploiter ce mécanisme : le style n'est téléchargé qu'une seule fois pour un même site, pas une fois par page

Exploitation du cache d'autant plus efficace que le contenu d'un site change généralement plus souvent que le style

Au passage, attention, la mise en cache du CSS par les navigateurs est pénible lorsque l'on code : parfois, modifier le CSS semble ne pas avoir d'effet… parce que le navigateur nous montre toujours l'ancienne version !

il faut faire un hard reload, c'est-à-dire actualiser la page en forçant le vidage du cache (Ctrl-Shift-R sous Firefox)

Cascade

Que se passe-t-il si on fait ceci :
h1 {
    color: red;
}

h1 {
    font-style: italic;
}

le titre est en rouge et en italique

Les deux règles s'appliquent : c'est la cascade, chaque règle s'ajoute aux précédentes.

NB : le titre est aussi en gras et en plus grand que le texte

nos règles s'ajoutent à des règles pré-existantes
  • style par défaut (feuille de style du navigateur)
  • paramètres définis par l'internaute dans son navigateur (feuille de style de l'internaute)
  • etc.
s'il y a conflit, À SÉLECTEUR ÉGAL, c'est la dernière règle déclarée qui gagne. je ne précise pas pour ne pas embrouiller le texte, on verra si qqn pose la question

Héritage

Dans l'exemple suivant, les deux propriétés CSS se comportent de manière différente

<article>
    <h2>Titre de l'article</h2>
    <p>Un paragraphe: mon article est <em>vraiment</em> super.</p>
    Ce texte n'est pas dans un paragraphe.
</article>
article {
    font-style: italic;
    border: 3px dotted red;
}

font-style est héritée par tous les enfants de l'article, mais pas border

Un élément hérite de toutes les propriétés héritables de ses ancêtres

Héritage jusqu'aux feuilles de l'arbre généré par le DOM

Si on veut que les em ne soient pas en italique, on est obligé de le dire explicitement

(j'enlève car les propriétés plus récentes initial, unset et surtout revert sont plus adaptées de toute façon) -- Inversement, on peut forcer une propriété à être héritée avec la valeur spéciale inherit (très utile comme « valeur par défaut » pour les propriétés héritables)

En général on devine intuitivement quelles propriétés sont héritables ou non (regarder une réf en cas de doute)

Groupes de sélecteurs

On a vu qu'une règle CSS est composée d'un sélecteur et d'une liste de couples propriété-valeur

Pour l'instant, on n'a utilisé comme sélecteur que le type d'un élément, mais on peut faire bien d'autres choses…

Exemple le plus simple : sélectionner plusieurs types d'éléments à la fois, en séparant leurs noms par des virgules :
h1, h2, h3 {
    color: red;
    text-decoration: underline;
}

h3 {
    font-weight: normal;
}
encore une application du principe DRY

Quelques précisions

Il existe un sélecteur universel, le caractère *, qui sélectionne tous les éléments. Utile pour débugger : essayer
* {
    border: 1px solid black;
}
On peut mettre des commentaires dans son code CSS
  • Forme d'un commentaire : /* je suis un commentaire */
  • Tout ce qui se situe entre /* et */ ne sera pas interprété par le navigateur
  • Sert à donner des informations sur l'utilité de telle partie du code, ou des explications sur son fonctionnement.
démo de l'utilisation de l'inspecteur Firefox