Chargement...

HTML CSS

Vous avez déjà pratiqué de petits changements d’apparence avec l’attribut style et des valeurs de couleur. Les vrais sites gardent rarement chaque règle de design sur chaque balise. CSS (Cascading Style Sheets) est le langage qui décrit l’apparence. Cette session se concentre sur la façon dont HTML charge le CSS selon trois approches courantes — pas encore sur la construction d’un système de design complet. Comprendre où vivent les règles fait gagner du temps de correction ensuite et rapproche les pages d’exercice du flux des vrais projets. Quand vous savez où réside chaque type de style, le passage à un cours CSS devient plus clair, car vous raccordez d’abord la page au fichier avant d’écrire des règles de mise en page complexes.

Que fait le CSS ici ?

HTML structure le contenu. Le CSS décrit la présentation : couleurs, espacements, polices et idées de mise en page que vous approfondirez plus tard. Votre page HTML peut porter quelques déclarations CSS sur un élément, garder une petite feuille dans le document, ou pointer vers un fichier .css séparé. Choisir le bon endroit garde les démos rapides et les vrais projets maintenables. Si tout est en ligne sur chaque balise, la mise à jour devient lente et répétitive ; si vous liez tôt un fichier externe, vous pratiquez l’habitude de partage dont dépendent les vrais sites. L’objectif ici n’est pas de mémoriser une bibliothèque de propriétés, mais de comprendre le chemin de chargement depuis HTML jusqu’à la règle appliquée par le navigateur.

Réponse directe

Utilisez le CSS en ligne avec style="..." sur un élément pour des tests rapides. Utilisez un bloc interne <style>...</style>, en général dans <head>, pour la pratique d’une seule page. Utilisez un fichier externe .css lié avec <link rel="stylesheet" href="styles.css"> lorsque plusieurs pages doivent partager le même aspect. Préférez le CSS externe dès que la réutilisation et un HTML propre comptent. Cette règle simple évite de mélanger démos rapides et style d’un site entier ; chaque méthode a un rôle clair, et passer du en ligne à l’externe est une étape naturelle d’apprentissage, pas un échec.

Trois façons en un coup d’œil

📊 Trois façons d’ajouter du CSS

Méthode Où Idéal pour
En ligne attribut style sur une balise Petits tests ponctuels
Interne élément style dans head Démos sur une seule page
Externe fichier .css + link Style partagé du site

CSS en ligne (rappel)

Le CSS en ligne vit sur un seul élément. Il convient parfaitement à une expérience de trente secondes et mal à un site entier, car chaque apparence répétée doit être recopiée. Si vous avez besoin d’une couleur sur un paragraphe pendant l’explication, l’attribut suffit ; si la couleur se répète sur dix paragraphes de cinq pages, la copie devient source d’erreurs. Voyez le en ligne comme un pont d’apprentissage, pas comme la base d’une identité multi-pages.

Rappel de CSS en ligne

html
HTML Code 
<p style="color: teal;">CSS en ligne sur un élément</p>

Quand le en ligne aide encore

  • Vérifier vite une couleur ou une taille
  • Enseigner l’idée property:value des sessions précédentes
  • Remplacements temporaires pendant l’apprentissage — puis déplacer la règle vers une feuille de style
    Ne construisez pas toute une marque multi-pages uniquement avec des attributs en ligne. Ce chemin devient dur à mettre à jour, complique le partage de la même règle entre fichiers, et ralentit tout changement de couleur ultérieur sur tout le site. Gardez le en ligne pour de courts essais, puis passez tôt à un bloc interne ou à un fichier externe.

CSS interne dans le head

Une feuille interne est un élément <style> qui contient les règles CSS du fichier HTML actuel. Les débutants le placent en général dans <head> pour déclarer le style avant le contenu de body. Cet ordre aide le navigateur et l’apprenant : vous voyez les règles au même endroit en haut de page plutôt que de les chercher au milieu du contenu. Le bloc interne convient quand vous pratiquez plusieurs règles tout en travaillant encore sur un seul fichier HTML.

CSS interne dans head

html
HTML Code 
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
p { color: navy; }
</style>
</head>
<body>
<p>This paragraph uses the style block.</p>
</body>
</html>

Lecture de l’exemple interne

  • L’élément style contient du CSS, pas des balises HTML de structure de page
  • p { color: navy; } signifie « tous les éléments p reçoivent un texte bleu marine » dans ce document
  • Une règle peut styliser beaucoup de paragraphes sans répéter style="..." sur chaque balise
  • Le CSS interne reste prisonnier de ce seul fichier HTML — les autres pages ne le voient pas sauf si vous copiez le bloc
  • Vous pouvez ajouter d’autres règles dans le même bloc, par exemple pour h1, sans ouvrir encore un second fichier

CSS externe avec link

Le CSS externe garde les règles dans un fichier comme styles.css. HTML se connecte à ce fichier avec un élément link. C’est le modèle habituel du style partagé du site. Quand la couleur des titres change une fois dans le fichier externe, toutes les pages liées sont touchées — c’est le grand gain par rapport à copier des blocs internes dans chaque fichier. Commencez avec un CSS à côté du HTML, puis organisez les dossiers quand les chemins sont solides.

Lien vers une feuille de style externe

html
HTML Code 
<head>
<title>External CSS</title>
<link rel="stylesheet" href="styles.css">
</head>

Ce qui doit être vrai pour que le CSS externe fonctionne

  • Le link a besoin de rel="stylesheet" pour que le navigateur connaisse la relation
  • href doit pointer vers le vrai fichier CSS avec un chemin correct (voir la session Chemins de fichiers)
  • Dans styles.css vous écrivez des règles comme p { color: navy; } et h1 { color: darkgreen; }
  • Si le chemin est faux, le HTML s’ouvre quand même — mais il paraît sans style
  • Les noms de fichiers peuvent distinguer majuscules et minuscules sur certains serveurs ; faites correspondre le nom dans href au nom réel sur le disque
    Placez le fichier CSS à côté du HTML pour le premier exercice, puis essayez un sous-dossier seulement quand les chemins semblent stables. Casser le lien exprès puis le réparer entraîne l’œil plus vite que la seule théorie.

Choisir une méthode

Demandez jusqu’où les styles doivent voyager :

  • Une expérience rapide sur un élément → en ligne
  • Une page d’exercice, plusieurs règles → <style> interne dans head
  • Plusieurs pages, un aspect partagé → .css externe + link
    Quand vous passerez plus tard à un cours CSS complet, les feuilles externes deviennent le défaut des vrais projets. Cette session HTML s’assure que vous savez les raccorder correctement avant d’écrire des mises en page complexes. Il n’y a pas de « mauvaise méthode » dans un court exercice ; l’erreur est d’utiliser seulement le en ligne alors que le site a besoin d’un vrai partage. Choisissez la méthode qui correspond à l’ampleur de la réutilisation, et gardez-la jusqu’à ce que le besoin du projet change.

Pratique dans votre éditeur

  1. Créez page.html avec un titre et deux paragraphes.
  2. Créez styles.css avec une règle qui colore h1 et une autre qui stylise p.
  3. Dans le head HTML, ajoutez <link rel="stylesheet" href="styles.css">.
  4. Ouvrez la page. Si les styles manquent, vérifiez le chemin et rel.
  5. Renommez ou déplacez temporairement styles.css, rechargez, voyez l’échec, puis corrigez href.
  6. Optionnel : déplacez une règle dans un bloc interne <style> et comparez.
    Casser le lien exprès enseigne les erreurs de chemin plus vite que de seulement les lire. Répétez l’exercice avec un fichier dans un petit sous-dossier après que le lien à côté de la page fonctionne, jusqu’à faire confiance au fait que href reflète l’emplacement réel du fichier. Enregistrez toujours avant de recharger pour ne pas croire que le navigateur a ignoré une règle que vous n’avez pas enregistrée.

Erreurs qui laissent les pages sans style

  • Oublier rel="stylesheet" sur link
  • Mettre styles.css dans un autre dossier mais lier comme s’il était à côté du HTML
  • Remplir chaque balise de style en ligne au lieu de partager une feuille
  • Placer par habitude un gros bloc <style> en fin de body alors que head est plus clair pour les débutants
  • Modifier le fichier CSS mais actualiser un autre HTML que celui que vous avez lié
  • Écrire dans href un nom de fichier qui diffère par les espaces ou l’extension du vrai fichier sur le disque
    Chacune de ces erreurs fait perdre du temps ou laisse croire que « le CSS ne marche pas » alors que le problème est le raccordement. Lisez la page comme un visiteur : le style est-il arrivé ? Savez-vous quel fichier fournit la règle ?

Résumé

  • Le CSS stylise HTML ; HTML peut charger le CSS en ligne, en interne ou en externe
  • Le style en ligne convient aux petits tests, pas à des sites entiers
  • Le <style> interne dans head convient à la pratique sur un seul fichier
  • Un .css externe plus link rel="stylesheet" est l’approche partagée habituelle
  • Les bons chemins de fichiers comptent autant que les règles CSS elles-mêmes
  • Préférez la méthode qui correspond à l’ampleur de réutilisation des styles
    Dans cet ordre vous construisez une habitude claire : tester vite au besoin, organiser les règles sur la page d’exercice, puis lier un fichier partagé quand les pages se multiplient — et toujours vérifier le chemin et rel avant d’accuser la règle elle-même.

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓
7
Questions
🎯
70%
Pour Réussir
♾️
∞
Temps
🔄
∞
Tentatives

📝 Instructions

  • Lisez chaque question attentivement
  • Sélectionnez la meilleure réponse pour chaque question
  • Vous pouvez refaire le quiz autant de fois que vous le souhaitez
  • Votre progression sera affichée en haut
Sujet 1 de 1
Html Tutoriel