Premiers pas en CSS

Ce que tu vas apprendre

• Relier un fichier .css à une page HTML.
• Écrire une règle : un sélecteur, des propriétés, des valeurs.
• Cibler un élément par sa balise, sa classe ou son identifiant.

Relier une feuille de style

Tu as une page HTML qui liste des recettes. Crée à côté un fichier style.css, puis ajoute cette ligne dans le <head> de ta page :

<head>
  <meta charset="utf-8">
  <title>Mes recettes</title>
  <link rel="stylesheet" href="style.css">
</head>

Le CSS (Cascading Style Sheets) est le langage qui décrit l'apparence d'une page : couleurs, tailles, positions. Le HTML dit ce que contient la page, le CSS dit comment elle s'affiche.

La balise link charge le fichier. L'attribut href donne son chemin, relatif à la page.

Une règle CSS

Voici ta première règle, dans style.css :

h1 {
  color: darkred;
  font-size: 2rem;
}

Une règle se lit en trois morceaux :

• le sélecteur (h1) désigne les éléments à styler ;
• entre accolades, des déclarations, chacune écrite sous la forme propriété: valeur; ;
• le point-virgule termine chaque déclaration.

Ici, tous les titres h1 de la page deviennent rouge foncé et grands. Si tu oublies un point-virgule, la déclaration suivante peut être ignorée : relis-les en cas de bug.

Cibler par la balise

Le sélecteur le plus simple est le nom de la balise. Il s'applique à tous les éléments de ce type :

p {
  line-height: 1.5;
}

Tous les paragraphes de la page ont maintenant un interligne confortable. C'est pratique pour les réglages généraux, mais trop large pour styler une seule recette.

Cibler par une classe

Une classe est une étiquette que tu choisis et que tu poses sur des éléments HTML avec l'attribut class.

<article class="recette">
  <h2>Tarte aux pommes</h2>
  <p class="duree">45 minutes</p>
</article>

Dans le CSS, une classe s'écrit avec un point devant son nom :

.recette {
  border: 1px solid gray;
}

.duree {
  color: gray;
}

Plusieurs éléments peuvent partager la même classe. Un élément peut aussi en porter plusieurs, séparées par des espaces : class="recette vegetarienne".

Cibler par un identifiant

Un identifiant (attribut id) nomme un élément unique de la page. En CSS, il s'écrit avec un dièse :

#entete {
  background-color: black;
}

Un id ne doit apparaître qu'une fois par page. Pour le style, préfère les classes, plus souples. Tu verras pourquoi dans le cours sur la cascade.

Combiner des sélecteurs

Tu peux viser un élément selon sa place dans la page.

a:hover {
  color: crimson;
}

Une pseudo-classe décrit un état de l'élément. Ici le lien change de couleur au survol.

Quelques propriétés et couleurs

Une propriété est un réglage visuel que tu peux modifier. Voici celles que tu utiliseras tout de suite :

Une couleur s'écrit de plusieurs façons. Ces trois lignes donnent un rouge très proche :

color: crimson;                 /* un nom de couleur */
color: #dc143c;                 /* en hexadécimal */
color: rgb(220 20 60);          /* rouge, vert, bleu de 0 à 255 */

Le texte entre /* et */ est un commentaire : le navigateur l'ignore, il sert à t'expliquer ton code.

Où écrire son CSS

Il existe trois emplacements possibles.

1. Un fichier .css relié par link : la bonne pratique, une feuille pour toutes les pages.
2. Une balise <style> dans le <head> : pratique pour un test rapide.
3. L'attribut style sur une balise : à éviter, car il mélange fond et forme.

À retenir

• <link rel="stylesheet" href="style.css"> dans le <head> relie le CSS à la page.
• Une règle est un sélecteur suivi de déclarations propriété: valeur; entre accolades.
• La balise cible tous les éléments d'un type, la classe (.nom) cible les éléments étiquetés, l'identifiant (#nom) cible un élément unique.
• Les combinaisons (.recette p, .recette > p, h1, h2) précisent où s'applique la règle.
• Les couleurs s'écrivent par nom, en hexadécimal ou avec rgb().
• Les outils de développement (F12) permettent de tester le CSS en direct.