Summary  
This chapter explains three approaches for applying CSS to HTML—inline styles, embedded style sheets, and external style sheets—detailing how each method scopes and organizes style rules.

General domain of usage  
Web development

Watch this video to see how to connect CSS to HTML using three methods: inline styles, embedded style sheets, and external style sheets. You will follow step-by-step examples to understand where to place your CSS code and how each approach affects your web page. projects. Use simple examples. Do not show the full html document stucture. Focus only on the CSS.

## Comment le CSS est ajouté au HTML
Il existe trois façons d'appliquer du CSS à un document HTML :
1. Styles en ligne ;
2. Feuilles de style intégrées ;
3. Feuilles de style externes.

Chaque méthode fonctionne différemment et s'utilise dans des situations distinctes.

## Styles en ligne
Les styles en ligne sont écrits directement dans un élément HTML à l'aide de l'attribut `style`.<br>
Exemple :

PHAgc3R5bGU9ImNvbG9yOiBibHVldmlvbGV0OyI+CiAgTGV0J3MgdXNlIGlubGluZSBzdHlsZXMgYW5kIGNoZWNrIHRoZSByZXN1bHQKPC9wPg==

Ce style s'applique uniquement à cet élément spécifique.

Les styles en ligne sont rapides à utiliser, mais ils ne sont pas réutilisables et sont difficiles à gérer dans des projets de grande envergure.

## Feuille de style intégrée

Une feuille de style intégrée s'écrit à l'intérieur des balises `<style>` dans la section `<head>` d'un document HTML.<br>
Exemple :

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxzdHlsZT4KICAgICAgcCB7CiAgICAgICAgY29sb3I6IGJsdWV2aW9sZXQ7CiAgICAgICAgZm9udC1zaXplOiAzNnB4OwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxwPldlIHdvcmsgd2l0aCBhbiBlbWJlZGRlZCBzdHlsZSBzaGVldCBpbiB0aGUgaGVhZCBvZiBIVE1MLjwvcD4KICA8L2JvZHk+CjwvaHRtbD4=

Cette méthode applique des styles à l'ensemble de la page, mais uniquement dans ce fichier HTML unique.

Elle est utile pour des pages petites ou autonomes.

## Feuille de style externe

Le CSS externe stocke les styles dans un fichier `.css` séparé et le relie au HTML à l'aide de la balise `<link>`.<br>
Exemple :

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDwhLS0gV2UgY2FuIGFkZCBtdWx0aXBsZSBsaW5rcyB0byBDU1Mgc3R5bGUgc2hlZXRzIGlmIG5lZWRlZC4gLS0+CiAgICA8bGluayByZWw9InN0eWxlc2hlZXQiIGhyZWY9InN0eWxlcy5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPHA+V2Ugd29yayB3aXRoIGFuIGV4dGVybmFsIHN0eWxlIHNoZWV0IGNvbm5lY3RlZCBpbiB0aGUgaGVhZC48L3A+CiAgPC9ib2R5Pgo8L2h0bWw+

cCB7CiAgY29sb3I6IGJsdWV2aW9sZXQ7CiAgZm9udC1zaXplOiAzNnB4Owp9

Cette méthode permet de réutiliser les styles sur plusieurs pages.

Il s'agit de l'approche privilégiée et la plus évolutive pour les projets réels.

Styles en ligne : appliqués directement aux éléments, mais non réutilisables.

Feuille de style intégrée : appliquée dans la balise `<head>`, n'affecte qu'une seule page.

Feuille de style externe : stockée dans un fichier `.css` séparé, réutilisable et recommandée pour la plupart des projets.

Résumé

Dans ce cours, nous utiliserons principalement des feuilles de style externes.

Quelles sont les méthodes existantes pour ajouter des styles à un document HTML ?

Maîtrisez les bases de CSS, le langage de style qui transforme l’apparence des pages web. Explorez les concepts fondamentaux tels que les styles de texte, les couleurs, l’espacement, le modèle de boîte, Flexbox et les effets décoratifs. Développez les compétences nécessaires pour créer des pages web visuellement attrayantes et bien structurées.

Comprendre comment CSS se connecte à HTML et comment les styles sont appliqués via les sélecteurs. Appliquer des couleurs, des styles de texte et des effets au survol pour contrôler la présentation visuelle.

Amélioration de la typographie à l'aide de la hauteur de ligne, de l'espacement, des propriétés de police et des polices personnalisées. Contrôle des familles de polices, du poids, du style et de la taille pour une meilleure lisibilité.

Contrôle de la structure de la mise en page à l'aide des propriétés de marge, de remplissage, de bordure et de largeur. Compréhension du comportement de dimensionnement des boîtes et des types d'affichage des éléments tels que bloc, en ligne et en ligne-bloc.

Contrôle des mises en page horizontales et verticales à l'aide des propriétés Flexbox. Ajustement de la direction, de l'alignement et de l'espacement pour structurer les composants de l'interface utilisateur.

Amélioration des mises en page à l'aide de couleurs d'arrière-plan, d'images, de pseudo-éléments et d'ombres. Mise en forme des composants visuels pour la profondeur et le contraste.

Connexion du CSS à HTML

Comment le CSS est ajouté au HTML

Styles en ligne

Feuille de style intégrée

Feuille de style externe