Le langage CSS

Exercice 14 — Mon premier fichier CSS

Crée un fichier style.css dans ton dossier minisite avec la règle suivante, relie-le à ta page (voir ci-dessus), puis actualise la page.

body {
  margin: 20px;
  font-family: Verdana;
  background: yellow;
  color: blue;
}

1. Qu'observes-tu ?
2. Modifie la règle pour avoir un fond rose, un texte blanc, la police Arial et une marge de 50 pixels.
3. À ton avis, que signifient margin, font-family et background ?

💾 dans ton dossier minisite (fichiers .html et .css)

Exercice 15 — Lire une règle

h3 {
  color: yellow;
  font-weight: bold;
  font-size: 20px;
  background: black;
}

1. Quel est le sélecteur ?
2. Quelles sont les quatre propriétés ? Quelle est la valeur de chacune ?
3. Quels éléments de la page seront modifiés ?
4. Écris la règle qui mettrait les titres <h1> en gris, centrés et en gras.

📝 réponses dans ton compte rendu, exercice 15

Exercice 16 — Titres, listes et tableaux

Ajoute les règles suivantes à ton fichier, une par une, en actualisant la page à chaque fois pour observer le changement :

h1 {
  color: grey;
  text-align: center;
  font-size: 40px;
}

ul {
  color: red;
  list-style-type: circle;
}

ol {
  font-variant: small-caps;
}

table {
  border: 2px dotted black;
}

td {
  border: 2px outset silver;
  padding: 5px;
}

1. Décris l'effet de chaque règle.
2. Pourquoi le texte des deux listes ne change-t-il pas de la même façon ?
3. Que fait padding ? En quoi diffère-t-il de margin ?

💾 dans ton dossier minisite (fichiers .html et .css)

Exercice 17 — Couleurs en hexadécimal

1. Avec le mélangeur RVB, trouve le code hexadécimal du rouge pur, du noir et du blanc.
2. Quelle couleur obtient-on avec #0000FF ?
3. Cherche le code hexadécimal d'un orange. Écris une règle h1 { color: ...; } qui l'utilise.

💾 dans ton dossier minisite (fichiers .html et .css)

Exercice 18 — Classes et liens qui réagissent

1. Ajoute à ta page deux paragraphes avec la classe important, et une règle .important qui les met en gras et en vert foncé.
2. Ajoute les règles a et a:hover ci-dessus. Que se passe-t-il quand tu survoles un lien ?
3. Pourquoi vaut-il mieux garder les liens soulignés ?

💾 dans ton dossier minisite (fichiers .html et .css)

Exercice 19 — Lisible ou pas ?

1. Avec le testeur de contraste, essaie le texte blanc sur le fond rose #FF69B4 de l'exercice « Mon premier fichier CSS ». Quel est le contraste ?
2. Quelle couleur de texte donnerait un bon contraste sur ce rose ?
3. Trouve trois couples de couleurs (texte, fond) lisibles, et trois couples illisibles.

📝 réponses dans ton compte rendu, exercice 19

Exercice 20 — Je donne un style à ma page

Choisis une ambiance pour ta page (ses couleurs, ses polices), puis écris ta feuille de style. Elle doit contenir :

• au moins six règles différentes ;
• une règle pour body, une règle pour les titres, une règle avec une classe, et une règle a:hover ;
• des couleurs dont le contraste est correct (vérifie-le avec le testeur) ;
• une marge ou un espacement (margin ou padding).

1. Décris en deux phrases l'ambiance choisie.
2. Quel est le plus faible contraste de ta page ? Est-il suffisant ?

💾 dans ton dossier minisite (fichiers .html et .css)