TD2

Remember that code is really the language in which we ultimately express the requirements. We may create languages that are closer to the requirements. We may create tools that help us parse and assemble those requirements into formal structures. But we will never eliminate necessary precision—so there will always be code.
Robert C. Martin

Introduction

Quelques rappels

Les feuilles de style en cascade nommées CSS (Cascading Style Sheets) servent à décrire la présentation, ou style, des documents (X)HTML et XML.

Les standards définissant CSS sont publiés par le W3C. Introduit fin 1996, 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'un des objectifs majeurs de CSS est de séparer le contenu de la forme dans un document (X)HTML. Il est par exemple ~~possible~~ , non... ~~souhaitable~~ , non ! OBLIGATOIRE de ne décrire que la structure d'un document en HTML, et de décrire toute la présentation dans une feuille de style CSS séparée.

Les styles sont appliqués au dernier moment, dans le navigateur web des visiteurs qui consultent le document. Cette séparation fournit un certain nombre de bénéfices, permettant d'améliorer l'accessibilité, de changer plus facilement de structure et de présentation, et de réduire la complexité de l'architecture d'un document.

Ainsi, les avantages des feuilles de style sont multiples :

La structure et la présentation du document sont gérées dans des fichiers séparés.
La conception d'un document se fait sans se soucier de la présentation.
La présentation est uniformisée, ie. plusieurs pages (X)HTML peuvent faire référence aux mêmes feuilles de styles.
Un même document peut donner le choix entre plusieurs feuilles de style, par exemple une pour l'impression et une pour la lecture à l'écran.
La lisibilité des pages (X)HTML est améliorée puisqu’elles ne contiennent plus de balises ni d'attributs de présentation.

Cette séparation de la structure et du rendu est un principe fondamental qu'on retrouve un peu partout lorsque l'on fait du développement informatique (par exemple, le cœur d'un programme doit être autant que possible indépendant de l'interface graphique).

Lier une feuille de style à une page HTML

Toutes les instructions de mises en forme seront contenues dans un fichier CSS identifiable par son extension .css. Le fichier (X)HTML contenant la structure du document doit alors contenir une référence vers le fichier CSS.

Par exemple, si vous possédez un fichier style.css, vous devrez ajouter la ligne suivante dans le bloc head du fichier HTML :

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

Il est possible de créer des feuilles de styles ne s'appliquant qu'à un certain type de media (on parle de media queries, c-à-d. de « requêtes media »), en utilisant l'attribut media.

			
        <!-- Cette feuille de styles ne s'appliquera qu'à l'impression -->
        <link rel="stylesheet" type="text/css" 
                 href="style_for_printing.css" media="print"/>
        
        <!-- Celle-ci ne s'appliquera qu'aux écrans de largeur 
                inférieure à 800px -->
        <link rel="stylesheet" type="text/css" 
                 href="style_for_small_screen.css" 
              media="screen and (max-width: 800px)"/>

Nous détaillerons la syntaxe des media queries dans un TD ultérieur.

Dans un sous-dossier styles de votre dossier web, créez un fichier vierge td.css.

Reliez ensuite cette feuille de style aux pages index.html, td1.html, td2.html et a_propos.html.

La page td2.html contiendra notamment les réponses aux questions qui vous seront posées dans ce TD.

Fonctionnement de CSS

Syntaxe

Si sa mise en œuvre est parfois compliquée, la syntaxe elle-même du CSS est très simple. Elle correspond au schéma suivant :

			
        selecteur { 
            propriété1: valeur1;
            propriété2: valeur2;
            ...
        }

Vous ~~pouvez~~ DEVEZ également insérer des commentaires dans votre code avec la syntaxe suivante :

			
        /* Commentaire ici */

Un premier exemple

L'attribut color sert à mettre un texte en couleur, et l'attribut background-color sert à modifier la couleur de l'arrière-plan d'un élément.

Ces attributs (et de manière générale tous les attributs de couleur) peuvent prendre notamment comme valeur :

un nom standard de couleur (voir par exemple sur MDN Web Docs) ;
un triplet (R, G, B) où R, G et B sont des entiers compris entre 0 et 255 qui représentent l'intensité lumineuse du rouge, du vert et du bleu (Red, Green, Blue) ;
un code hexadécimal #RRGGBB équivalent.

On peut également rajouter un canal alpha (transparence), en donnant un quadruplet (R, G, B, A), où A est soit un nombre flottant compris entre 0 (transparent) et 1 (opaque), soit un pourcentage.

Dans la feuille td.css, copiez les lignes suivantes :

				
    p {
        color:blue;
        background-color: #fcf9d9;                
    }

    h1 {
        /* On veut mettre un cadre coloré au titre. */
        border-color: rgb(40, 200, 100);
        /* Par défaut, le cadre est invisible ; on le rend visible. */
        border-style:solid;
        /* On centre le texte dans le cadre. */
        text-align: center;
    }

Vérifiez que les couleurs apparaissent bien sur les pages td1.html, td2.html et a_propos.html.

Vous pouvez les personnaliser si vous le souhaiter, ou appliquer des couleurs à d'autres éléments.

À quoi correspond rgb(120, 56, 13) en hexadécimal ?
Combien de couleurs chacune de ces trois méthodes (rgb, hexa ou nom de couleur) vous permettent d'obtenir ?
Comparez en quelques lignes ces méthodes (avantages/inconvénients).

Si vous souhaitez plus d'informations sur la gestion des couleurs en CSS, vous pouvez vous tourner une fois encore vers le site MDN Web Docs.

Ressources en ligne

Il existe un grand nombre de sites de qualité proposant des documentations sur CSS.

Je vous conseille particulièrement le site MDN Web Docs, géré par la Fondation Mozilla.

La documentation est claire, complète, fiable, avec de nombreux exemples interactifs. Les articles sont régulièrement mis à jour, ce qui est essentiel pour des technologies qui évoluent très rapidement. Enfin, la plupart des articles sont traduits en français (la version anglaise est parfois plus complète cependant).

Parmi les autres ressources très connues, citons la documentation officielle sur le site du W3C (bon courage pour la lire !!!) et le site W3Schools (qui malgré son nom n'est pas affilié au W3C), assez complet, mais avec parfois des erreurs !

CSS : « Feuilles de styles en cascade »

Le « Document Object Model »

Dans cette partie, nous allons prendre un peu de recul pour bien saisir le fonctionnement de CSS.

Prenez le temps de bien la lire et la comprendre ! Même si elle paraît assez théorique à première vue, elle est nécessaire pour bien comprendre comment CSS fonctionne.

Un document HTML peut-être vu comme un arbre, dont la racine est le nœud html duquel va découler tout le contenu du document. On parle de Document Object Model (abrégé en DOM).

En voici une définition plus complète :

Le Document Object Model ou DOM (pour modèle objet de document) est une interface de programmation pour les documents HTML, XML et SVG. Il fournit une représentation structurée du document sous forme d'un arbre et définit la façon dont la structure peut être manipulée par les programmes, en termes de style et de contenu. Le DOM représente le document comme un ensemble de nœuds et d'objets possédant des propriétés et des méthodes. Les nœuds peuvent également avoir des gestionnaires d'événements qui se déclenchent lorsqu'un événement se produit. Cela permet de manipuler des pages web grâce à des scripts et/ou des langages de programmation. Les nœuds peuvent être associés à des gestionnaires d'événements. Une fois qu'un événement est déclenché, les gestionnaires d'événements sont exécutés.

developer.mozilla.org

Le DOM fournit ainsi une interface de programmation (API en anglais) qui permet au CSS et plus encore au Javascript de manipuler le document.

Considérons par exemple le code HTML suivant :

			
<html>
<head>
    <meta charset="utf-8" />
    <title>Ma page</title>
</head>
<body>
    <header>
        <h1>Mon titre</h1>    
    </header>
    <main>
        <section>
            <h2>1re partie</h2>
            <p>Un paragraphe</p>
            <p>Un autre paragraphe</p>
        </section>
        <section>
            <h2>2e partie</h2>
            <p>Un 3e paragraphe</p>
            <img src="img.png" alt="Dessin"/>
        </section>
    </main>
    <footer></footer>
</body>
</html>

Ce code correspondant à l'arbre suivant :

Le nœud racine (root node en anglais) de cet arbre est le nœud html. Celui-ci a deux enfants :

un nœud head ;
un nœud body.

Le nœud head aura lui-même deux enfants :

un nœud title, qui a un seul enfant ;
un nœud meta, qui n'a pas d'enfant. (On dit que c'est une feuille de l'arbre).

Si l'on continue, on remarque que le nœud title a pour enfant un nœud de nature différente de ceux rencontrés précédemment : il n'est pas associé à une balise, mais correspond simplement à du texte. Il n'a évidemment pas d'enfant (c'est donc une feuille).

On peut donc distinguer deux types de nœuds :

les nœuds de type ELEMENT, qui sont les nœuds associés à des balises.
les nœuds de type TEXT, qui correspondent à un fragment de texte ne contenant pas de balise.

À retenir

Un document HTML correspond à un arbre, on parle de « Document Object Model » ou DOM.

Il existe deux types de nœuds :

des nœuds de type élément, créés par des balises
des nœuds de type texte, qui correspondent aux portions de texte ne contenant pas de balise

Vocabulaire

Dans ce TD, quand nous parlerons d'un « élément » d'une page web, nous désignerons par ce terme un nœud de type element et tout son contenu, c'est-à-dire ses descendants. Par exemple, « l'élément body » désignera tout le sous-arbre engendré par le nœud body.

En réalité, le DOM de ce document est un peu plus complexe. En effet, un saut de ligne entre deux balises ou un espace donnera également naissance à un nœud de type texte. Ainsi, le nœud html a en réalité 3 enfants : un nœud head, un nœud texte contenant le saut de ligne et d'éventuels espaces l'entourant, et le nœud body.

(Il existe également d'autres types de nœuds, par exemple les nœuds de type comment pour les commentaires. Nous nous contenterons cependant de cette présentation simplifiée, suffisante pour expliquer le fonctionnement de CSS.)

La notion d'héritage

En ce qui concerne le CSS, le principe général est d'appliquer un style à un nœud du document via une règle CSS. Cette règle va ensuite se propager à tous les nœuds fils, puis aux petits-fils, etc. d'où le nom de feuille de styles en cascade.

Ainsi, si on indique que le texte d'une section doit être en rouge, tous les paragraphes, titres... contenus dans la section auront leur texte en rouge par défaut.

Ces paragraphes, titres... héritent la couleur rouge de leur parent section.

Il est bien sûr possible d'attribuer un style particulier à un paragraphe qui ne sera alors pas en rouge. De manière générale, la règle la plus spécifique l'emporte toujours sur la règle la plus générale.

À côté de ce principe général d'héritage, d'autres critères plus complexes entrent en compte lorsqu'il s'agit de déterminer quelle règle l'emporte. Nous y reviendrons.

À retenir

Par défaut, un élément hérite du style de ses parents.

On considère le DOM suivant :

Combien cet arbre a-t-il de nœuds de type ELEMENT ? De type TEXT ?
Écrire le code HTML correspondant à ce DOM.
Remarque : pour pouvoir écrire la réponse, pensez à utiliser les entités HTML (HTML entities).

Les sélecteurs simples

Les balises

Le sélecteur peut être un simple nom de balise.

Par exemple, la règle h2 {color:red;} indique que le texte de tous les titres de niveau 2 devra être en rouge.

Les classes

On peut associer à un élément HTML une ou plusieurs classes, en ajoutant un attribut class dans la balise.

Par exemple, considérons la balise code qui indique un morceau de code.

L'affichage du code sera sans doute différent selon qu'il s'agisse de code C, C++, Java, Python, PHP...

On peut donc choisir d'associer à la balise code une classe précisant le langage de programmation en question.

			
        <code class="python">
        def factorielle(n):
            return n*factorielle(n-1) if n > 0 else 1
        </code>
        
        <code class="C">
        int sum(int n) {
            int r = 0;
            for ( ; n > 0; n--) r = r + n;
            return(r);
        }   
        </code>

L'attribut class en soit n'a aucun effet, mais il peut servir ensuite de support à CSS et à JavaScript pour personnaliser le rendu du code en fonction du langage de programmation.

En CSS, on peut associer un style à une classe en utilisant un sélecteur de la forme .ma_classe (le nom de la classe avec un point devant).

Par exemple, pour afficher avec un fond jaune un élément de classe "python", et avec un fond bleu un élément de classe "C", on écrira le code CSS suivant :

			
    .python {
        background-color: yellow;
    }
    code.C {
        background-color: blue;
    }

Comme leur nom l'indique, les classes servent à classer, en sachant qu'un même élément peut appartenir à plusieurs catégories. (De la même manière qu'un tweet peut contenir plusieurs hashtags.)

Voici un autre exemple : un forum liste différentes discussions. On associe la classe « new » aux discussions récentes, et la classe « pin » aux discussions épinglées en haut du forum.

Le code HTML listant une discussion à la fois récente et épinglée ressemblera par exemple à ceci :

			
    <li class="new pin">
        <a href='discussion.php?id=12547' class="subject">
            [urgent] comment overclocker ma montre connectée ?
        </a> 
        par 
        <i class="author">
            Luc S
        </i>
        .
    </li>

Associons-lui le code CSS suivant :

			
    .pin {
        background-color: beige;
        font-weight: bold;
    }

    .new {
        background-color: aliceblue;
        font-style: italic;
    }

Comme l'élément li est de la classe pin, la règle font-weight: bold; le mettra en gras.

De même, étant également de la classe new, la règle font-style: italic; le mettra en italique.

Qu'en est-il de la couleur du fond ? Nous pouvons voir que deux règles contradictoires devraient s'appliquer : background-color: beige; et background-color: aliceblue;. Ces deux règles ayant à priori la même priorité, c'est la dernière mentionnée dans le fichier CSS qui va l'emporter. La couleur du fond sera donc aliceblue.

Nous reparlerons en détail des règles de priorité. Pour l'instant, retenons que l'ordre des classes dans l'attribut class d'une balise n'a pas d'importance (sauf dans le cas très improbable où l'on utiliserait un sélecteur d'attribut pour accéder à la classe, autant dire que vous pouvez l'oublier...) Par contre, l'ordre des règles dans le fichier CSS n'est pas anodin : en cas d'égale priorité, c'est la dernière règle qui s'applique.

À retenir !

On peut associer une ou plusieurs classes à un ou plusieurs éléments d'une page web en utilisant l'attribut class :

				<mabalise class="ma_classe autre_classe">

Pour associer un style aux éléments d'une classe, on utilise le sélecteur .ma_classe :

				.ma_classe {propriété: valeur;}

L'ordre des classes dans la balise HTML n'a pas d'importance.

Les identifiants

On peut associer à un élément HTML un identifiant, en ajoutant un attribut id dans la balise.

À la différence d'une classe, un identifiant est unique : il est interdit d'attribuer le même identifiant à deux éléments d'une même page.

On utilisera les identifiants avec parcimonie. En effet, potentiellement, on pourrait faire du CSS en n'utilisant que des identifiants, mais cela rendrait le code source peu lisible et peu maintenable.

Avant de créer un identifiant, il convient de se poser quelques questions :

Le style que je veux appliquer sera-t-il vraiment propre à ce seul objet ? Sinon, mieux vaut utiliser une classe.
Est-ce que je ne peux pas déjà y accéder en utilisant une balise spécifique ? Par exemple, le titre principal est accessible via la balise h1, la barre de navigation via nav, etc.

En CSS, on peut associer un style à un identifiant en utilisant un sélecteur de la forme #mon_identifiant : l'identifiant précédé d'un hashtag (ou croisillon pour parler français !)

Un exemple :

			
    <p id="intro">
        Commençons par le commencement.        
    </p>

Le CSS associé :

			
    #intro {
        font-style:italic;
    }

À retenir !

On peut associer un identifiant à un unique élément d'une page web en utilisant l'attribut id :

				<mabalise id="mon_identifiant">

Pour associer un style aux élément ainsi identifié, on utilise le sélecteur #mon_identifiant :

				#mon_identifiant {propriété: valeur;}

Attention à la casse !

CSS n'est généralement pas sensible à la casse (c'est-à-dire aux majuscules/minuscules).

Pour plus de lisibilité, il est cependant conseillé d'écrire le nom des propriétés CSS en minuscules (« color » et non « Color », « COLOR » ou « CoLoR » SVP !)

Attention : les noms de classes et les identifiants, eux, sont par contre sensibles à la casse. Ainsi, par exemple, #ID et #id ne font pas référence au même identifiant.

Le sélecteur universel

Le sélecteur * permet de créer des règles qui vont s'appliquer à tous les éléments de la page, sauf si un autre règle s'applique spécifiquement à l'élément.

Considérons par exemple le code HTML suivant :

			
    <body>
        <h1>Le principe de neutralité</h1>
        <p class="abstract">
            Dans ce document, nous aborderons la question de la 
            <em>neutralité du Net</em> 
            et de sa récente remise en question.
        </p>
        
        
        À suivre...
    </body>

Appliquons lui les règles CSS suivantes :

			
    .abstract {
        color: red;
    }                   

    * {
        color:blue;
    }
    
    body {
        color: green;
        background-color:cornsilk;
    }

Décortiquons ce fichier CSS :

La règle color: green; s'applique au body et donc se propage par héritage à tous les éléments contenus dans l'élément body... sauf s'il existe une règle plus spécifique les concernant.
Ici, * {color: blue;} applique la règle color: blue; à chaque élément de la page. Comme elle concerne directement chaque balise, cette règle va primer sur les propriétés héritées (qui ne concerne qu'indirectement les balises contenues dans le body).

Ainsi, seul le texte « À suivre... » qui est directement dans le body sera en vert.
Enfin, la règle color: red;, qui s'applique seulement aux éléments de classe abstract, est donc plus spécifique que color:blue; qui s'applique à tous les éléments. Le paragraphe concerné sera donc en rouge.

Voici donc le résultat (cliquez sur « Edit in JSFiddle » si vous souhaitez le modifier pour faire des essais) :

Quelques propriétés courantes

Il existe un nombre considérable de propriétés CSS, et il est bien entendu hors de question de toutes lister et encore moins de les retenir.

Nous donnerons tout de même ici quelques propriétés ultra-courantes qu'il peut être utile de mémoriser pour gagner du temps.

Propriétés de texte

Propriété	Valeurs (exemples)	Description
color	red #A05F23 rgb(100,50,30) rgba(50,30,60,.5)	Couleur du texte.
font-family	Arial... serif sans-serif monospace	Police de caractères.
font-size	10px 10pt 3em 200%	Taille de la police.
font-weight	bold normal	Mise en gras.
font-style	italic normal	Mise en italique.
text-align	left center right justify	Alignement horizontal du texte.

Boîtes

Les éléments d'une page web peuvent être vus comme des boîtes rectangulaires disposées sur la page. (On parle de « box model »).

Nous consacrerons un prochain TD au sujet, mais en attendant voici quelques propriétés fort utiles pour modifier l'apparence de ces « boîtes ».

Propriété	Valeurs (exemples)	Description
background-color	red #A05F23 rgb(100,50,30) rgba(50,30,60,.5)	Couleur du fond.
opacity	0.4 40%	Opacité : 0 (transparent) ⟶ 1 (opaque).
background-image	url("img/fond.png")	Image de fond.
width	200px 50%	Largeur de la boîte. Voir aussi min-width et max-width.
height	200px 50%	Hauteur de la boîte. Voir aussi min-height et max-height.
border	solid red #AF2B54 2px dotted dashed...	Propriétés du cadre. La valeur solid correspond à un cadre simple (par défaut, il est invisible, ce qui correspond à la valeur none). Voir aussi border-top, border-left, border-bottom et border-right.

Listes

Propriété	Valeurs (exemples)	Description
list-style	none url("img/puce.png") decimal square...	Mise en forme d'une liste.

Déboguer du CSS

Quelques conseils

Le débogage d'un fichier CSS n'est pas fondamentalement différent de celui d'un programme quelconque.

Voici quelques stratégies que vous pratiquez déjà probablement :

Réduire le code de manière à obtenir un « minimal (non)working example », c'est-à-dire enlever autant d'éléments de code que possible en conservant le problème. Cela aidera à voir d'où il peut venir.
En l'absence d'indice sur la localisation du problème, on peut procéder par dichotomie : on désactive la moitié du code CSS (en le mettant en commentaire /* ... */), on regarde le résultat et éventuellement on inverse la partie désactivée ; on recommence en désactivant ensuite la moitié du code encore actif, etc. jusqu'à réussir à localiser précisément le problème. (Reste ensuite à le résoudre !)

Il est cependant souvent plus efficace d'utiliser les fonctionnalités de débogage de Firefox ou de Chrome que de faire des tests depuis l'éditeur.

Les outils de développement de Firefox et Chrome permettent de visualiser facilement toutes les règles CSS appliquées à un élément (même lorsque ces règles sont réparties sur plusieurs fichiers). On peut en un clic cocher ou décocher des règles pour voir instantanément leur effet, modifier ces règles en temps réel...

Pour activer le débogueur, tapez F12.

Utilisez ensuite l'inspecteur pour voir toutes les propriétés CSS s'appliquant à un élément.

Validation

Comme pour le code HTML, il faut IMPÉRATIVEMENT vérifier que votre code CSS est valide, en utilisant le validateur CSS du W3C.

Rappels !

À chaque fois que vous modifiez votre page web :

Vérifiez le rendu dans votre navigateur habituel (Chrome ou Firefox de préférence) ;
Vérifiez sa validité sur le site du W3C (HTML+CSS !) ;
Testez le rendu dans un autre navigateur (Chrome si vous utilisiez Firefox, et vice-versa).

À la fin, si tout fonctionne bien, vérifiez le rendu dans les autres navigateurs (Safari et Edge au minimum ; idéalement vérifiez aussi que le rendu n'est pas trop mauvais sous Internet Explorer).

Sélecteurs avancés

Combiner des sélecteurs

Nous n'avons vu pour l'instant que des sélecteurs simples (noms de balises, de classes ou identifiants).

Il est tant maintenant de passer aux choses sérieuses en apprenant à combiner les sélecteurs entre eux.

Considérons deux sélecteurs A et B.

combinaison	signification	détails	exemple
A,B	A ou B	Sélectionne tous les éléments sélectionnés par A ou par B.	p,.important sélectionne les éléments qui sont des paragraphes ou qui sont de classe important.
AB	A et B	Sélectionne tous les éléments qui sont à la fois sélectionnés par A et par B.	p.important sélectionne les paragraphes qui sont de classe important.
A B	B descend de A	Sélectionne tous les éléments qui sont sélectionnés par B et qui sont inclus dans un élément sélectionné par A.	p .important sélectionne les éléments de classe important qui sont contenus dans des paragraphes.
A>B	B est fils de A	Sélectionne tous les éléments qui sont sélectionnés par B et qui sont fils d'un élément sélectionné par A.	p>.important sélectionne les éléments de classe important dont le parent direct est un paragraphe.
A+B	B est le frère cadet de A (c-à-d. qui le suit directement)	Sélectionne tous les éléments qui sont sélectionnés par B et dont l'élément précédent est sélectionné par A, à condition que A et B aient le même parent.	h2+p sélectionne le paragraphe situé juste après un titre h2, à condition qu'ils aient le même parent (ils sont par exemple tous deux contenus dans la même section).
A~B	B est un frère puîné de A (c-à-d. qui vient après)	Sélectionne tous les éléments qui sont sélectionnés par B à condition qu'un élément antérieur soit sélectionné par A et que A et B aient le même parent.	h2~p sélectionne n'importe quel paragraphe situé après un titre h2, à condition qu'ils aient le même parent (ils sont par exemple tous deux contenus dans la même section, mais le paragraphe n'est pas forcément juste après le titre).

Confusion fréquente !

Ne confondez pas les sélecteurs AB et A B ! C'est une source d'erreurs extrêmement fréquente.

Un exemple :

.important.nouveau désigne les élément qui sont à la fois de classe important et de classe nouveau
par contre, .important .nouveau désigne les éléments qui sont de classe nouveau et sont contenus (directement ou non) dans un élément de classe .important

Un espace en plus change donc complètement le comportement de la règle CSS !

Voici un exemple assez complet, prenez le temps de le décortiquer et d'essayer de le modifier pour vous familiariser avec les sélecteurs.

Voici le code HTML du body d'une page web

				
<body>
  <h1>Préparatifs pour l'hiver</h1>
  <ul>
    <li>Prévoir :
      <ul>
        <li>du <em>pain</em></li>
        <li>du <em>chocolat</em></li>
        <li>des <em>oranges</em></li>
        <li>quelques <em>châtaignes</em></li>
      </ul>
    </li>
    <li>une bonne <em>couverture</em></li>
  </ul>
</body>

Quel code CSS peut-on écrire pour, sans toucher au code HTML (pas de classe ou d'identifiant !), mettre un fond rouge à « châtaignes » et un fond cyan à « couverture » ?

Les sélecteurs d'attributs

Comme leur nom l'indique, les sélecteurs d'attributs permettent de sélectionner des éléments d'une page web en fonction des attributs présents ou non dans leur balise.

En voici quelques-uns :

Sélecteur	Signification	Exemple
[attr]	Sélectionne un élément possédant l'attribut attr.	[lang]
[attr=val]	Sélectionne un élément dont l'attribut attr vaut val.	[lang=fr]
[attr^=valeur]	Sélectionne un élément possédant un attribut attr dont la valeur commence par val.	[href^="https"]
[attr*=valeur]	Sélectionne un élément possédant un attribut attr dont la valeur contient la sous-chaîne val.	[href*="www.monsite.org"]

Vous trouverez la liste complète et de nombreux exemples sur MDN web docs.

Proposez une feuille de style qui attribue une couleur différent aux liens selon qu'il s'agisse :

d'une adresse mail ;
d'un lien vers une page web interne à votre site ;
d'un lien vers une page web externe à votre site .

Les pseudo-classes et pseudo-éléments

Pseudo-classes

Une pseudo-classe correspond à un sélecteur permettant de cibler un élément étant dans un certain état (lien sélectionné, bouton survolé, etc.)

La syntaxe d'une pseudo-classe est :nom_pseudo_classe.

La plus connue est la pseudo-classe :hover, qui permet de modifier le style d'un élément lorsqu'il est survolé avec la souris.

Par exemple, la règle a:hover {color:red;} indique que lorsqu'on survole un lien, il doit se mettre en rouge.

La liste complète des pseudo-classes est disponible comme toujours sur MDN web docs. Nous reparlerons de certaines pseudo-classes dans les TD suivants.

Changez la couleur de vos titres lorsqu'ils sont survolés avec la souris.
Quelle est la différence entre p:hover et p :hover ?

Pseudo-élements

Les pseudo-éléments correspondent à des fragments de texte particuliers qui ne correspondent pas à un nœud du DOM.

La syntaxe d'un pseudo-élément est ::nom_pseudo_element.

Voici quelques pseudo-éléments qui peuvent vous être utiles :

Pseudo-élement	Signification	Exemple
::first-letter	Sélectionne la première lettre d'un élément.	`p::first-letter { color: red; }`
::first-line	Sélectionne la première ligne d'un élément.	`p::first-line { color: blue; }`
::before	Sélectionne un morceau de texte vide juste avant l'élément, dans lequel on pourra rajouter du contenu.	`li::before { content: "★ "; color: orange; }`
::after	Sélectionne un morceau de texte vide juste après l'élément, dans lequel on pourra rajouter du contenu.	`q::after { content: " »"; }`

Remarque : ::first-letter ne fonctionne que sur les éléments de type bloc, c'est-à-dire ceux qui provoquent un retour à la ligne (cf. TD suivant).

Dans le TD1, vous avez utilisé des citations.

Modifiez votre feuille de style pour que, pour chaque citation, il y ait des guillemets colorés avant et après la citation.
Profitez-en pour appliquer un fond coloré à chaque citation.

Règles de priorité

Il est fréquent que plusieurs règles CSS contradictoires puissent s'appliquer au même élément d'une page.

Le navigateur appliquera de préférence, dans cet ordre :

une règle liée à un média particulier (media="print" par exemple),
une règle liée à un identifiant (#mon_identifiant: {}),
une règle liée à une classe (.ma_classe: {}),
une règle liée à une balise,
une règle liée au sélecteur universel *,
une règle héritée,
une règle par défaut.

À retenir

De manière générale, l'idée est que la règle la plus spécifique s'impose.

Si deux règles ont la même spécificité (par exemple deux classes), la dernière l'emporte.

Détails techniques :

La spécificité d'une règle correspond à un triplet d'entiers (i, c, b), qui comptabilisent respectivement, dans tout le sélecteur :

le nombre d'identifiants
le nombre de classes
le nombre de balises

Les pseudo-classes (comme :hover) et les sélecteurs d'attributs (comme [href^="http"]) sont assimilées à des classes, tandis que les pseudo-éléments (comme ::before) sont assimilés à des balises.

La règle dont le sélecteur a la spécificité la plus grande (au sens de l'ordre lexicographique) l'emporte. (Rappel : en cas d'égalité, c'est la dernière règle qui prévaut).

Par exemple, le sélecteur main>section#introduction p.commentaire em a pour spécificité (1, 1, 4) :

un identifiant (#introduction),
une classe (.commentaire)
quatre balises (main, section, p et em).

Les règles associées l'emporteront donc sur celle du sélecteur article.hier ol li.important a.externe qui a pour spécificité (0, 3, 4).

Considérons le code HTML suivant :

				
        <body>
        <h1>Ma page</h1>
        <p id="intro" class="important">Ceci est un paragraphe <em>assez remarquable</em>.</p>
        <p class="important">Et que dire de celui-ci ?</p>
        </body>

Associons-lui maintenant ce code CSS :

				
        * {
            color:brown;
        }
        
        body {
            color:red;
        }
        
        #intro {
            color:violet;
        }
        
        p {
            color:orange;
        }
        
        p.important {
            color:green;
        }
        
        body .important {
            color:blue;
        }

Quelle sera la couleur des différents éléments de cette page ? Essayez de le trouver par vous-même avant de tester ce code pour vérifier.
Pour chaque élément, identifiez les règles qui peuvent potentiellement le concerner et classez-les de la plus forte à la faible, en justifiant.

Il est également possible d'imposer une règle de force en ajoutant l'annotation !important à la fin (avant le point-virgule)... mais ceci est à éviter au maximum. Cela peut cependant être utile pour déboguer un fichier CSS ou comme solution temporaire en attendant de trouver mieux.

Pour plus de détails, je vous conseille la lecture de cet excellent article (en français qui plus est). Vous pouvez également vous référer aux paragraphes sources et spécificité de l'article CSS sur en.wikipedia.org.