Découvrir le CSS et mettre en forme une page web

Le HTML décrit la nature et l’organisation des contenus, tandis que le CSS définit leur apparence. Un titre doit donc être identifié comme un titre dans le document HTML, puis mis en forme dans la feuille CSS. Cette séparation permet de modifier l’apparence de plusieurs pages sans réécrire leur contenu et rend le code plus facile à comprendre et à maintenir.

<!-- index.html -->
<h1>Initiation au développement web</h1>
<p>Découvrez les bases du HTML et du CSS.</p>

/* style.css */
h1 {
  color: #17324d;
  font-size: 2rem;
}

p {
  color: #374151;
}

L’élément link, placé dans la partie head, relie la page à une feuille de style externe. L’attribut rel="stylesheet" indique la nature de la ressource et href précise son emplacement. Une même feuille CSS peut ainsi être utilisée par plusieurs pages afin de conserver une identité graphique homogène.

<head>
  <meta charset="UTF-8">
  <title>Inscription à la formation</title>
  <link rel="stylesheet" href="style.css">
</head>

Une règle CSS commence par un sélecteur désignant les éléments concernés. Les déclarations sont placées entre accolades et associent une propriété à une valeur. Chaque déclaration se termine normalement par un point-virgule. Une même règle peut contenir plusieurs déclarations.

h2 {
  color: #0f766e;
  font-size: 1.5rem;
  text-align: center;
}

Un sélecteur de balise applique une règle à tous les éléments HTML portant le même nom. Le sélecteur p cible tous les paragraphes, tandis que h1 cible tous les titres de premier niveau. Cette méthode convient aux styles généraux.

body {
  font-family: Arial, sans-serif;
}

h1 {
  color: #17324d;
}

p {
  line-height: 1.6;
}

Une classe permet d’appliquer un même style à plusieurs éléments, même s’ils utilisent des balises différentes. Elle est déclarée avec l’attribut HTML class et ciblée en CSS au moyen d’un point. Un élément peut recevoir plusieurs classes séparées par des espaces.

<p class="information">Les inscriptions ferment le 15 octobre.</p>
<p class="information importante">Il reste cinq places.</p>

.information {
  background-color: #e0f2fe;
  padding: 1rem;
}

.importante {
  color: #b91c1c;
  font-weight: bold;
}

L’attribut id identifie un élément unique dans la page. En CSS, il est ciblé avec le caractère #. Un identifiant peut également servir de destination à un lien interne ou être utilisé par JavaScript. Pour les styles réutilisables, les classes restent généralement préférables.

<section id="inscription">
  <h2>Formulaire d’inscription</h2>
</section>

#inscription {
  background-color: #ffffff;
  border: 2px solid #0f766e;
  padding: 1.5rem;
}

Les sélecteurs peuvent être combinés pour cibler les éléments selon leur contexte. Le sélecteur nav a concerne uniquement les liens placés dans un élément nav, tandis que p.alerte cible les paragraphes possédant la classe alerte.

nav a {
  color: #ffffff;
}

p.alerte {
  color: #b91c1c;
  font-weight: bold;
}

Lorsque plusieurs règles modifient la même propriété, le navigateur tient notamment compte de la précision du sélecteur et, à priorité égale, de l’ordre des règles. Une classe est généralement plus précise qu’un sélecteur de balise. L’usage systématique de !important doit être évité.

<p class="message">Les inscriptions sont ouvertes.</p>

p {
  color: #374151;
}

.message {
  color: #0f766e;
}

/* La règle de classe est appliquée. */

Certaines propriétés, notamment celles relatives au texte, sont transmises par un élément parent à ses descendants. Définir la police et la couleur sur body suffit donc souvent à les appliquer à l’ensemble de la page. Les bordures et les marges ne sont normalement pas héritées.

body {
  font-family: Arial, sans-serif;
  color: #1f2937;
}

/* Les titres et paragraphes héritent de ces valeurs. */

Le CSS permet d’exprimer les couleurs de plusieurs manières. La notation hexadécimale est fréquente dans les chartes graphiques, rgb() décrit les composantes rouge, verte et bleue, et hsl() sépare la teinte, la saturation et la luminosité. Une composante alpha ajoute de la transparence.

h1 { color: #17324d; }
.information { background-color: rgb(224, 242, 254); }
.alerte { color: hsl(0, 72%, 42%); }
.voile { background-color: rgba(15, 118, 110, 0.15); }

background-color applique une couleur derrière le contenu. background-image peut afficher une image ou un dégradé. Des propriétés complémentaires contrôlent sa position, sa répétition et sa taille. Le texte doit conserver un contraste suffisant avec l’arrière-plan.

.banniere {
  color: #ffffff;
  background-color: #17324d;
  background-image: linear-gradient(135deg, #17324d, #0f766e);
  background-size: cover;
  background-position: center;
}

Une palette efficace associe une couleur principale, une couleur secondaire, des couleurs neutres et, si nécessaire, une couleur d’alerte. Les variables CSS centralisent ces valeurs afin de les réutiliser et de les modifier facilement. Le contraste doit garantir la lisibilité.

:root {
  --couleur-principale: #17324d;
  --couleur-secondaire: #0f766e;
  --couleur-fond: #f4f7fa;
  --couleur-texte: #1f2937;
  --couleur-alerte: #b91c1c;
}

body {
  color: var(--couleur-texte);
  background-color: var(--couleur-fond);
}

font-family définit la police et prévoit généralement plusieurs solutions de remplacement. font-size détermine la taille du texte. Les unités relatives comme rem facilitent une mise à l’échelle cohérente et respectent mieux les préférences de l’utilisateur.

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
}

h1 { font-size: 2.25rem; }
h2 { font-size: 1.5rem; }
small { font-size: 0.875rem; }

font-weight contrôle l’épaisseur des caractères, tandis que font-style permet notamment d’utiliser l’italique. line-height règle la hauteur des lignes et influence fortement le confort de lecture. Ces propriétés créent une hiérarchie sans multiplier les variations.

h1, h2 {
  font-weight: 700;
}

.introduction {
  font-style: italic;
}

p {
  line-height: 1.6;
}

text-align détermine l’alignement du texte. text-decoration ajoute ou retire notamment un soulignement, tandis que text-transform modifie visuellement la casse. Un texte long centré ou entièrement écrit en capitales devient rapidement difficile à lire.

h1 { text-align: center; }

.surtitre {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ancien-tarif { text-decoration: line-through; }
a { text-decoration: underline; }

Les liens doivent rester reconnaissables comme des éléments interactifs. Les pseudo-classes :link, :visited, :hover et :active modifient leur apparence selon leur état. Les changements ne doivent pas reposer exclusivement sur la couleur.

a:link { color: #0369a1; }
a:visited { color: #6b21a8; }

a:hover {
  color: #0f766e;
  text-decoration-thickness: 3px;
}

a:active { color: #b91c1c; }

Un bouton doit être visible et indiquer clairement l’action déclenchée. Sa couleur, ses dimensions, son espacement interne et son libellé contribuent à cette compréhension. cursor: pointer peut renforcer l’indication, sans remplacer l’utilisation d’un véritable élément button.

<button type="submit">Valider mon inscription</button>

button {
  padding: 0.75rem 1.25rem;
  color: #ffffff;
  background-color: #0f766e;
  border: 0;
  border-radius: 0.5rem;
  font-weight: 700;
  cursor: pointer;
}

Les pseudo-classes représentent un état particulier. :hover réagit au passage du pointeur, :focus signale l’élément actif au clavier et :checked cible une case ou un bouton radio sélectionné. Le focus ne doit jamais être supprimé sans indicateur de remplacement.

button:hover { background-color: #115e59; }

input:focus,
select:focus,
textarea:focus {
  outline: 3px solid #38bdf8;
  outline-offset: 2px;
}

input[type="checkbox"]:checked + label {
  color: #0f766e;
  font-weight: bold;
}

Le navigateur représente chaque élément comme une boîte composée de quatre zones. Le contenu occupe la partie centrale, le padding crée un espace intérieur, la bordure entoure cet espace et la marge éloigne la boîte des éléments voisins.

.carte {
  width: 300px;              /* contenu */
  padding: 20px;             /* espace intérieur */
  border: 2px solid #0f766e;
  margin: 30px;              /* espace extérieur */
}

width et height fixent les dimensions d’un élément. Leurs variantes max- et min- définissent des limites. Pour les contenus textuels, il est souvent préférable de limiter la largeur tout en laissant la hauteur s’adapter automatiquement.

main {
  width: 90%;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

img {
  max-width: 100%;
  height: auto;
}

Par défaut, la largeur déclarée correspond uniquement au contenu : le remplissage et la bordure s’y ajoutent. Avec box-sizing: border-box, ils sont inclus dans la dimension annoncée. Cette règle rend les dimensions plus prévisibles.

*,
*::before,
*::after {
  box-sizing: border-box;
}

.carte {
  width: 300px;
  padding: 20px;
  border: 2px solid #0f766e;
}

Le padding crée une distance entre le contenu et les limites de sa boîte. Il améliore la lisibilité des cartes, boutons, champs et encadrés. Une valeur unique s’applique aux quatre côtés, tandis que deux valeurs distinguent les espacements verticaux et horizontaux.

.information { padding: 1rem; }

button {
  padding: 0.75rem 1.25rem;
}

article {
  padding: 2rem 1.5rem;
}

La propriété margin crée un espace extérieur autour d’un élément. Elle sépare les titres, paragraphes et sections afin d’établir un rythme visuel. Les valeurs automatiques à gauche et à droite peuvent centrer un bloc dont la largeur est limitée.

main {
  max-width: 1000px;
  margin: 0 auto;
}

section { margin-bottom: 3rem; }
h2 { margin: 0 0 1rem; }
p { margin-bottom: 1.25rem; }

Les bordures délimitent les éléments, border-radius arrondit leurs angles et box-shadow crée un effet de profondeur. Ces propriétés aident à différencier des cartes ou des zones fonctionnelles, mais doivent rester cohérentes et modérées.

.carte {
  background-color: #ffffff;
  border: 1px solid #dbe3ea;
  border-radius: 0.75rem;
  box-shadow: 0 4px 12px rgba(23, 50, 77, 0.12);
}

.alerte {
  border-left: 5px solid #b91c1c;
}

Une carte rassemble des contenus appartenant à un même ensemble visuel, tandis qu’un encadré met en évidence une information particulière. Les classes permettent de réutiliser ces composants sans dupliquer les règles CSS.

<article class="carte">
  <h3>Atelier HTML et CSS</h3>
  <p>Une initiation pratique destinée aux débutants.</p>
  <a href="#inscription">S’inscrire</a>
</article>

.carte {
  padding: 1.5rem;
  background: #ffffff;
  border-radius: 0.75rem;
  box-shadow: 0 4px 12px rgba(23, 50, 77, 0.12);
}

Une page paraît cohérente lorsque ses espacements et dimensions suivent une logique constante. Il est préférable de réutiliser un nombre limité de valeurs plutôt que de choisir une marge différente pour chaque élément. Des variables CSS peuvent constituer une échelle commune.

:root {
  --espace-xs: 0.5rem;
  --espace-s: 1rem;
  --espace-m: 1.5rem;
  --espace-l: 2rem;
  --espace-xl: 3rem;
}

section { margin-bottom: var(--espace-xl); }
.carte { padding: var(--espace-m); }
h2 { margin-bottom: var(--espace-s); }

L’inspecteur indique les règles appliquées, héritées ou remplacées et permet de tester temporairement de nouvelles valeurs. La feuille CSS doit ensuite être corrigée dans son fichier d’origine et organisée par grandes catégories clairement identifiables.

/* 1. Réglages généraux */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

/* 2. Navigation */
nav a { color: #ffffff; }

/* 3. Composants */
.carte {
  padding: 1.5rem;
  background-color: #ffffff;
}