Attributs HTML & Introduction CSS

Objectif de la semaine : maitriser les sélecteurs CSS et le box model.

Méthode recommandée : teste chaque sélecteur sur un petit extrait HTML avant de styliser une page complète. Avancez par petites étapes et testez chaque changement immédiatement.

Les attributs id et class permettent d'identifier les éléments HTML pour y appliquer du CSS (ou du JavaScript).

<!-- id : identifiant UNIQUE sur la page -->
<h1 id="titre-principal">Mon titre</h1>
<nav id="navigation">...</nav>

<!-- class : peut être utilisée plusieurs fois -->
<p class="introduction">Premier paragraphe.</p>
<p class="introduction">Deuxième paragraphe.</p>

<!-- Plusieurs classes sur un même élément (séparées par des espaces) -->
<div class="carte active grande">...</div>

<!-- id ET class sur le même élément -->
<section id="apropos" class="section-principale">...</section>

Un lien avec href="#id" fait défiler la page vers l'élément qui possède cet id.

<!-- Dans la navigation : lien vers une section -->
<nav>
  <a href="#html">HTML</a>
  <a href="#css">CSS</a>
  <a href="#js">JavaScript</a>
</nav>

<!-- Les sections cibles ont l'id correspondant -->
<section id="html">
  <h2>HTML</h2>
  <p>...</p>
</section>

<section id="css">
  <h2>CSS</h2>
  <p>...</p>
</section>

<!-- Retour en haut de page -->
<a href="#">↑ Retour en haut</a>

Un sélecteur CSS désigne les éléments HTML auxquels on applique des styles. La règle CSS a la forme : sélecteur { propriété: valeur; }

Par type (balise)

/* Cible TOUS les <p> de la page */
p { color: #333; line-height: 1.6; }

/* Cible tous les liens <a> */
a { color: blue; text-decoration: none; }

/* Plusieurs sélecteurs, même règle */
h1, h2, h3 { font-family: Georgia, serif; }

Par id

/* Cible l'élément avec id="titre-principal" */
#titre-principal { font-size: 2rem; color: navy; }

/* Cible le nav avec id="navigation" */
#navigation { background-color: #1a1a2e; }

Par classe

/* Cible tous les éléments qui ont la classe carte */
.carte { border: 1px solid #ccc; border-radius: 8px; }

/* Combiné : un <p> qui a la classe "introduction" */
p.introduction { font-style: italic; }

/* Descendant : un <a> à l'intérieur d'un nav */
nav a { color: white; }

Pseudo-classes

/* États de l'élément */
a:hover  { color: red; }          /* survol souris */
a:active { color: orange; }        /* pendant le clic */
a:visited { color: purple; }       /* lien déjà visité */
input:focus { border-color: blue; } /* champ actif */

/* Position dans le parent */
li:first-child  { font-weight: bold; }   /* premier li */
li:last-child   { border-bottom: none; } /* dernier li */
li:nth-child(2) { background: #f5f5f5; } /* 2e li */
li:nth-child(odd)  { background: #eee; } /* impairs */
li:nth-child(even) { background: #fff; } /* pairs */

Pseudo-éléments

/* Insère du contenu avant/après l'élément */
.carte::before {
  content: "★ ";
  color: gold;
}

.prix::after {
  content: " $";
  color: #16a34a;
}

/* Première lettre et première ligne */
p::first-letter { font-size: 2em; float: left; color: #1d4ed8; }
p::first-line   { font-variant: small-caps; color: #334155; }

/* Style du texte sélectionné */
::selection { background: yellow; color: black; }

/* Placeholder dans un input */
input::placeholder { color: #aaa; font-style: italic; }

Commentaires CSS

/* Ceci est un commentaire CSS */

/* ===== HEADER ===== */   /* souvent utilisé pour délimiter des sections */

/* TODO: ajuster la couleur */

Couleur du texte et du fond

p {
  color: #333;              /* couleur du texte */
  background-color: #f5f5f5; /* couleur de fond */
}

/* raccourci : background accepte aussi une couleur */
body { background: white; }

Formats de couleur

/* Noms de couleur (140 noms disponibles) */
color: red;  color: navy;  color: tomato;  color: cornflowerblue;

/* Hexadécimal (#RRGGBB) */
color: #264de4;   /* bleu CSS */
color: #e44d26;   /* orange HTML5 */
color: #fff;      /* raccourci pour #ffffff (blanc) */
color: #000;      /* raccourci pour #000000 (noir) */

/* RGB : rouge, vert, bleu (0–255) */
color: rgb(38, 77, 228);     /* même bleu qu'au dessus */
color: rgb(255, 255, 255);   /* blanc */

/* RGBA : avec transparence (alpha de 0 à 1) */
background-color: rgba(0, 0, 0, 0.5);  /* noir à 50% de transparence */
background-color: rgba(38, 77, 228, 0.2); /* bleu pâle transparent */

Chaque élément HTML est une boîte composée de 4 zones, de l'intérieur vers l'extérieur :

/*  content → padding → border → margin  */

.boite {
  /* Dimensions du CONTENU */
  width: 300px;
  height: 150px;

  /* PADDING : espace entre le contenu et la bordure */
  padding: 20px;          /* 4 côtés égaux */
  padding: 10px 20px;     /* haut/bas  gauche/droite */
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;

  /* BORDER : bordure visible */
  border: 2px solid #264de4;          /* épaisseur style couleur */
  border-width: 1px;
  border-style: solid; /* solid, dashed, dotted, double… */
  border-color: red;
  border-top: 3px dashed orange;      /* un seul côté */

  /* MARGIN : espace à l'extérieur de la bordure */
  margin: 30px;           /* 4 côtés */
  margin: 0 auto;         /* centrage horizontal */
  margin-bottom: 1rem;
}

box-sizing: border-box

/* Par défaut : width = largeur du contenu seulement.
   Avec border-box : width inclut padding + border. */

* {
  box-sizing: border-box; /* recommandé, à mettre en début de fichier CSS */
}

/* Exemple : avec border-box, ces deux éléments ont la même largeur totale */
.colonne {
  width: 50%;
  padding: 20px; /* inclus dans les 50% */
}

Les validateurs W3C servent à détecter les erreurs de syntaxe et les mauvaises pratiques dans votre code. C'est un réflexe essentiel avant de remettre un travail.

Valider votre HTML

1. Ouvrez le validateur HTML : validator.w3.org.
2. Choisissez une méthode : URL, fichier uploadé, ou copier-coller du code.
3. Lancez la validation et lisez les messages d'erreur ligne par ligne.

Valider votre CSS

1. Ouvrez le validateur CSS : jigsaw.w3.org/css-validator.
2. Validez votre fichier .css (URL, upload ou copier-coller).
3. Corrigez les propriétés invalides, fautes de frappe ou points-virgules manquants.

Comment lire les messages

• Error : le code est invalide et doit être corrigé.
• Warning : le code fonctionne souvent, mais peut poser un problème de compatibilité ou de qualité.
• Corrigez d'abord les premières erreurs : une seule faute peut en générer plusieurs autres.

Validation W3C directement dans VS Code

Vous pouvez aussi valider votre code sans quitter VS Code avec l'extension W3C Web Validator.

1. Ouvrez l'onglet Extensions (Ctrl + Shift + X).
2. Recherchez W3C Web Validator puis installez l'extension.
3. Dans un fichier HTML ou CSS, lancez la commande de validation (palette de commandes).
4. Consultez les erreurs directement dans l'éditeur et corrigez-les au fur et à mesure.

Modifiez le CSS pour styliser le HTML fourni, puis cliquez sur Exécuter pour voir le résultat.

Construisez une mini page de profil pour pratiquer les sélecteurs CSS.

1. Utilisez au moins un sélecteur par type : balise, classe, id, pseudo-classe.
2. Ajoutez une carte stylisée avec margin, padding, border et border-radius.
3. Validez votre HTML/CSS avec les validateurs W3C et corrigez les erreurs.

Les questions sont cachées par défaut. Clique sur « Commencer le quiz » pour débuter.