Introduction à CSS

L'âge sombre du HTML

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

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

<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)

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

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.

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

h1 {
    color: red;
    font-style: italic;
}

Feuilles de style externes

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

<link rel="stylesheet" href="mon_style.css" />

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

<link rel="stylesheet" href="ecran.css" media="screen" />
<link rel="stylesheet" href="papier.css" media="print" />

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 (sous Firefox, faire Ctrl-Shift-R, ou Ctrl-F5 (et pas Shift-F5, je me suis trompé pendant le CM)

Pourquoi la feuille de style est-elle parfois mise en cache et parfois non ? C'est parce que la mise en cache est heuristique — quelques explications ici

Cascade

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

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…

h1, h2, h3 {
    color: red;
    text-decoration: underline;
}

h3 {
    font-weight: normal;
}

Quelques précisions

* {
    border: 1px solid black;
}