TP 2 — CSS : première approche

Objectif : séparer le fond (HTML) de la forme (CSS), comprendre les trois manières d'ajouter du style et mettre en forme texte et tableaux.

2.1 Les trois manières d'ajouter du style

• Créez le dossier code/tp2, et dedans les dossiers exemple, exercice1, exercice2.

Dans le dossier exemple, testez les trois manières de mettre en forme une page :

1. Style en ligne — CSS mélangé au HTML :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <title>Style en ligne</title>
  </head>
  <body>
    <h1 style="font-weight:bold;color:red">Mon premier heading</h1>
  </body>
</html>

2. Style interne — feuille de style dans le <head> :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <title>Style interne</title>
    <style type="text/css">
      h1 { font-weight: bold; color: red; }
    </style>
  </head>
  <body>
    <h1>Mon premier heading</h1>
  </body>
</html>

3. Style externe — fichier CSS séparé :

style.css :

h1 {
  font-weight: bold;
  color: red;
}

index.html :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <title>Style externe</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Mon premier heading</h1>
  </body>
</html>

• Créez les trois fichiers et visualisez le rendu de chacun.
• Notez les inconvénients des deux premières méthodes (recherche : rel est-il obligatoire ? que signifie-t-il ?).

À retenir : on sépare le contenu (HTML) de la présentation (CSS). rel="stylesheet" (obligatoire) indique la nature du lien, href le chemin vers la ressource. On peut lier plusieurs feuilles : en cas de conflit, la dernière chargée gagne.

2.2 L'inspecteur, votre meilleur ami

Les outils de développement du navigateur (touche F12, ou clic droit → Inspecter) permettent de :

• naviguer dans l'arbre HTML ;
• voir les règles CSS qui s'appliquent à chaque élément ;
• modifier dynamiquement le HTML et le CSS sans toucher au fichier.
• Sur n'importe quel élément de votre page, faites un clic droit → Inspecter.
• Modifiez en direct la couleur d'un titre dans l'onglet Styles : l'affichage change immédiatement, mais votre fichier n'est pas modifié.

2.3 CSS interne sur un site existant

• Dans exercice1, copiez le dossier site1 du TP1.
• Ajoutez un CSS interne à index.html : un bloc <style> placé dans le <head>, qui définit des couleurs, textes et fonds différents pour body, h1, h2 et h3. Choisissez vos propres valeurs.
• Visualisez et notez que le style s'applique à toute la page, quels que soient les éléments ciblés.

2.4 Exercice 2 : une page HTML sans style

• Dans exercice2, copiez index.html. Créez une page exo2.html contenant :

<h1>Ceci est mon premier titre</h1>
<h2>Mon sous-titre</h2>
<p>
  Et ceci mon premier <strong>paragraphe</strong>. Et ceci est la
  dernière phrase du paragraphe 1.
</p>
<ol>
  <li>point <strong>numéro 1</strong></li>
  <li>point numéro 2</li>
  <li>point numéro 3</li>
</ol>
<ul>
  <li>Une chose</li>
  <li>Encore <strong>une chose</strong></li>
</ul>
<h2>D'autres paragraphes</h2>
<p>Texte long au choix sur plusieurs lignes</p>
<p>Un autre long paragraphe sur plusieurs lignes</p>

• Insérez le tableau suivant et complétez les cellules :

• Insérez à la suite un lien vers la page d'accueil : « mon 1er site ».

2.5 La mise en forme du texte

• Écrivez un fichier style2.css qui modifie l'apparence de exo2.html :
  • body : fond de couleur claire, texte sombre ;
  • h1 : rouge et italique ;
  • h2 : bleu ;
  • p : texte justifié (text-align: justify) ;
  • ul : sans puces (list-style-type: none) ;
  • li : gris.
• Reliez style2.css à exo2.html et visualisez.
• Complétez la feuille avec :
  • les liens (a) de couleur verte ;
  • les strong de couleur rouge ;
  • les strong contenus dans une liste : italique, gras et bleu.
• Vérifiez la différence entre strong seul (rouge) et strong dans une liste (bleu, italique, gras).
• Aérer le texte (recherche) : trouvez la propriété qui règle l’espacement vertical entre les lignes d’un paragraphe et appliquez-la à body pour rendre le texte plus lisible. Faites ensuite en sorte que vos titres h2 s’affichent entièrement en majuscules, quel que soit le texte tapé dans le HTML.
• Une ligne séparatrice élégante (recherche) : votre page possède déjà une ligne horizontale. Retirez son style par défaut puis donnez-lui une apparence personnalisée (épaisseur, couleur, largeur réduite et centrée).

À retenir : text-align: justify justifie, list-style-type: none supprime les puces, et les sélecteurs combinés (li strong) ciblent précisément des éléments.

2.6 Les boîtes : marges, fond et centrage

• Ajoutez pour body : des marges extérieures de 10 px partout (margin) et une police Calibri (ou une famille sans-serif).
• Mettez en forme h1 : fond bleu foncé, texte blanc, une largeur (width), la boîte centrée dans son conteneur (margin-left: auto; margin-right: auto) et le texte centré dans la boîte (text-align: center).
• Ajoutez au début de la page un paragraphe spécial (avec une classe, par exemple .paragraphe-special) contenant une dizaine de lignes de texte, sur lequelles appliquer : une largeur de 90 %, une hauteur de 100 px, la boîte centrée, un texte justifié de couleur lime, une police monospace ('Courier New' ou similaire), une image de fond et un padding de 10 px.
• Ajustez les marges intérieures (padding) et extérieures (margin) pour une meilleure présentation.
• La largeur réelle d’une boîte (recherche) : en combinant une largeur fixe, un rembourrage (padding) et une bordure, la largeur totale affichée dépasse la valeur que vous avez déclarée. Recherchez comment faire en sorte que la largeur déclarée corresponde à la largeur totale (rembourrage et bordure inclus), appliquez-la à votre boîte et constatez la différence visuelle.
• La transparence (recherche) : appliquez une transparence partielle à votre paragraphe spécial et observez le résultat, puis annulez-la et testez à la place un fond partiellement transparent. Le texte est-il affecté de la même manière dans les deux cas ?

À retenir : tout élément HTML est une boîte : contenu → padding (espace intérieur) → border → margin (espace extérieur). margin-left/right: auto + width centrent une boîte ; text-align: center centre le texte.

2.7 Les tableaux en CSS

Sur les éléments d'une table on peut définir toutes les propriétés des boîtes. Deux propriétés utiles :

1. border-collapse: collapse pour que les bordures de la table et des cellules soient confondues (pas doubles) ;
2. caption-side: top | bottom pour positionner la légende.

• Dans exo2.html, complétez votre tableau avec la structure suivante : une légende (<caption>) résumant le contenu, un <thead> (ligne d'en-tête avec des <th>), un <tbody> (les lignes de données) et un <tfoot> contenant « liste non exhaustive » s'étendant sur les trois colonnes (avec colspan).
• Définissez les règles CSS du tableau : une largeur, la table centrée, une police Calibri, des bordures, un fond clair, border-collapse: collapse. Mettez aussi en forme caption (position avec caption-side, centrage, italique), thead, tr, td/th (avec padding), et prévoyez un changement d'apparence au survol : un surlignage des lignes (tbody tr:hover) et un pied de tableau (tfoot) au texte italique et centré devenant gras au survol.
• Survolez les lignes : la couleur de fond change. Survolez le pied de tableau : le texte devient gras.
• Testez caption-side: bottom.

À retenir : <thead>, <tbody>, <tfoot> structurent la table. border-collapse: collapse fusionne les bordures, :hover applique un style au survol, tbody tr:hover permet de surligner une ligne.

2.8 Manipuler les sélecteurs

Vous savez déjà cibler des balises (h1), des classes (.ma-classe) et des id (#mon-id). Le cours présente aussi des combinaisons de sélecteurs très fréquentes :

• Dans exercice2, créez une page selecteurs.html et une feuille selecteurs.css que vous reliez.
• Copiez dans selecteurs.html une structure imbriquée proche de celle du cours :

<body>
  <div>
    <h1>Premier heading</h1>
    <p>Premier article</p>
    <p class="notes">Notes</p>
    <div>
      <h1>Second heading</h1>
      <p>Second article</p>
      <p class="notes">Notes</p>
    </div>
  </div>
</body>

• Vérifiez que chacun des sélecteurs suivants produit bien le résultat annoncé :
  • h1 { color: red; } : les deux h1 deviennent rouges ;
  • h1, p.notes { … } : les h1 et les .notes ;
  • div h1 { … } : les h1 descendants de n'importe quel div ;
  • div > h1 { … } : seulement les h1 enfants directs d'un div ;
  • h1.notes { … } : un h1 qui possède aussi la classe notes.
• Pour chaque règle : annotez d'abord dans un commentaire votre prédiction (quels éléments seront modifiés), testez, puis corrigez votre prédiction si besoin.
• Modifiez ensuite le HTML pour que seul le premier h1 soit rouge, sans toucher aux classes ni aux id. Avec quel sélecteur ? (indice : la différence tient au niveau d'imbrication.)

À retenir : la virgule réunit (X, Y), l'espace descend (X Y), > cible l'enfant direct (X > Y), . et # filtrent selon la classe ou l'id. Combiner ces opérateurs permet de cibler précisément sans encombrer le HTML.

Bonus — Le jeu des sélecteurs (CSS Diner)

Entraînez-vous à écrire des sélecteurs de plus en plus fins, de façon ludique et sans rédiger de page CSS complète :

• Ouvrez le jeu CSS Diner dans votre navigateur.
• Principe : à chaque niveau, une assiette d'aliments est affichée ; la consigne vous demande de sélectionner des éléments et vous devez taper le sélecteur CSS qui les cible exactement.
• Les niveaux progressent du plus simple (A, #id, .classe) vers le plus complexe : descendant A B, enfant A > B, premier enfant :first-child, frère adjacent A + B, premier du type :first-of-type, et sélecteurs d'attributs [attr] / [attr="valeur"], etc.
• Terminez au moins les 15 premiers niveaux et notez dans vos réponses les sélecteurs qui vous ont posé problème, avec leur signification.
• (Pour aller plus loin) poursuivez jusqu'à la fin : les pseudo-classes et combinaisons découvertes vous serviront au TP3.