Il existe plusieurs façons d’intégrer du CSS dans un fichier HTML. Voici les différentes méthodes :
1. CSS en ligne (inline CSS)
Le CSS en ligne est appliqué directement aux éléments HTML via l’attribut style. Cela peut être pratique pour des styles spécifiques et uniques à un seul élément.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple de CSS en ligne</title>
</head>
<body>
<p style="color: red; font-size: 20px;">Ce texte est rouge et de taille 20px.</p>
</body>
</html>
2. CSS en interne (internal CSS)
Le CSS interne est défini dans la section <head> d’un document HTML, à l’intérieur de l’élément <style>. Cela permet de centraliser les styles de la page dans un seul endroit au lieu de les disperser parmi les balises HTML.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple de CSS interne</title>
<style>
body {
background-color: lightblue;
}
p {
color: green;
font-size: 18px;
}
</style>
</head>
<body>
<p>Ce texte est vert et de taille 18px.</p>
</body>
</html>
3. CSS externe (external CSS)
Le CSS externe est défini dans un fichier séparé avec l’extension .css. Ce fichier est ensuite lié au document HTML via l’élément <link> dans la section <head>. Cela permet de réutiliser le même fichier CSS pour plusieurs pages HTML.
Exemple de fichier CSS (style.css) :
body {
background-color: lightyellow;
}
p {
color: blue;
font-size: 16px;
}
Exemple de fichier HTML :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple de CSS externe</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Ce texte est bleu et de taille 16px.</p>
</body>
</html>