date: 2023-09-01
Type: Cours
Projet: Blindcode
Cours: CSSCSS : Comment inclure du CSS dans de l'HTML
Pour appliquer les règles CSS à une page web, vous avez plusieurs options :
<style> : Vous pouvez inclure votre CSS directement dans la balise <style> du document HTML. Cette méthode est à proscrire, je ne vous autorise pas à l'utiliser à ce cours. Par contre, il vous sera parfois utile, lors de petit projet personnels ou pour faire des tests rapides de passer par cette méthode.<link>.La première méthode consiste à inclure vos règles CSS directement dans la balise HTML en utilisant l'attribut style. Bien que cela puisse sembler pratique pour de petits ajustements de style, elle n'est généralement pas recommandée pour les projets de grande envergure en raison de son manque de séparation entre le contenu et la présentation.
<!DOCTYPE html>
<html>
<head>
<title>Exemple de CSS en ligne</title>
</head>
<body>
<h1 style="color: blue;">Titre en Bleu</h1>
<p style="font-size: 18px; text-align: center;">Paragraphe centré avec une grande police.</p>
</body>
</html>
Avantages :
Inconvénients :
<style>La deuxième méthode consiste à inclure vos règles CSS à l'intérieur d'une balise <style> placée dans la section <head> du document HTML. Cela permet de séparer le CSS du contenu HTML, ce qui est plus propre que l'inclusion directe dans les balises.
<!DOCTYPE html>
<html>
<head>
<title>Exemple de CSS dans une balise <style></title>
<style>
h1 {
color: green;
}
p {
font-size: 16px;
}
</style>
</head>
<body>
<h1>Titre en Vert</h1>
<p>Paragraphe avec une taille de police de 16 pixels.</p>
</body>
</html>
Avantages :
Inconvénients :
La méthode préférée pour gérer les styles CSS est d'inclure les règles à partir d'un fichier CSS externe. Cela permet de séparer complètement la structure HTML du style CSS, ce qui facilite la maintenance et la gestion des styles.
index.html :
<!DOCTYPE html>
<html>
<head>
<title>Exemple de CSS externe</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Titre avec un style externe</h1>
<p>Paragraphe stylisé à partir d'un fichier CSS externe.</p>
</body>
</html>
style.css :
/* style.css */
h1 {
color: red;
}
p {
font-size: 20px;
}
Avantages :
Inconvénients :
En résumé, bien que les deux premières méthodes (inclusion dans la balise HTML directement et inclusion dans une balise <style>) soient parfois utilisées pour des ajustements rapides, l'inclusion de CSS à partir d'un fichier externe est la méthode recommandée pour des projets web plus importants en raison de sa séparation propre entre le contenu et la présentation, ce qui facilite la maintenance et la gestion des styles.
créé le 2023-09-01 à 14:42