Tutoriel CSS - Leçon 1 - Comment inclure des styles CSS
Je ne vais pas expliquer à quoi sert le CSS. Si vous avez ouvert ce tutoriel, c’est que vous souhaitez l’apprendre. Je dirai simplement que les possibilités du CSS sont très vastes et permettent de réaliser des mises en page de toute complexité. En contrepartie, utiliser le CSS signifie qu’il faudra renoncer à certains attributs comme size, color, bgcolor, align et autres, qui peuvent « gêner » le CSS.
Il existe au moins trois façons d’intégrer du CSS dans votre fichier HTML. Voyons d’abord la plus simple, puis la deuxième et enfin la méthode correcte.
CSS dans une balise
On peut appliquer du CSS directement avec l’attribut style :
<div style="width: 200px; height: 100px;"> Bloc </div>
Nous définissons ici un bloc de 200 par 100 pixels. Le CSS s’écrit ainsi : l’attribut style="". Entre guillemets, on place les styles CSS.
style="propriété:valeur;propriété:valeur;propriété:valeur"
On écrit d’abord la propriété (width, height, etc.), suivie de deux-points puis de la valeur. Chaque propriété est séparée par un point-virgule.
Passons à la deuxième méthode d’écriture du CSS.
CSS au début du document HTML
On utilise la balise <style></style> pour écrire du CSS directement dans le document.
<html> <head> <title>Tutoriel CSS</title> <style type="text/css"> /* ici nous écrivons le code CSS */ </style> </head> <body> <p>Apprenez le CSS avec drupalbook.org</p> </body> </html>
La balise style s’écrit dans <head></head>, après la balise <title>. Écrivons un peu de CSS :
<html>
<head>
<title>Tutoriel CSS</title>
<style type="text/css">
body{
background: #eeeeee; /* fond de page */
font-size: 14px; /* taille du texte */
}
p{
color: #ff0000; /* couleur du texte */
}
</style>
</head>
<body>
<p>Apprenez le CSS avec drupalbook.org</p>
<p>Deuxième ligne de texte avec drupalbook.org</p>
</body>
</html>
Voyons comment s’écrit le CSS pour les balises. Quand on écrit un nom de balise en CSS, les règles s’appliqueront à toutes ces balises. Par exemple, p signifie que les règles s’appliqueront à tous les paragraphes.
Le CSS s’écrit en mettant d’abord la balise cible, puis les règles dans des accolades :
propriété:valeur;propriété:valeur;propriété:valeur
Propriété, deux-points, valeur, point-virgule, et on recommence. On peut omettre le dernier point-virgule, mais c’est mieux de le garder.
Nous avons vu deux méthodes d’intégration du CSS, passons maintenant à la troisième, la meilleure.
CSS dans un fichier séparé
C’est la meilleure méthode, qui sépare complètement le CSS du HTML. Parfois on a envie d’inclure du CSS directement dans le HTML, mais il faut se retenir et sortir le CSS dans un fichier séparé. Pourquoi ?
L’idée principale du CSS est de séparer le contenu (texte) de la présentation. Le HTML sert à structurer le texte, le CSS sert à rendre ce texte joli : tailles, couleurs, formes, bordures, marges.
Deuxième raison : quand HTML et CSS sont dans un même fichier, le code devient difficile à lire et lourd. Troisième raison : les fichiers CSS sont mis en cache par le navigateur, donc séparés, ils ne sont chargés qu’une seule fois, ce qui accélère le chargement des pages. Vous voyez où je veux en venir ?
Il faut toujours essayer de placer le CSS dans un fichier séparé ! Voilà mon conseil. Créons donc un fichier CSS séparé avec la balise <link> :
<html> <head> <title>Tutoriel CSS</title> <link type="text/css" rel="stylesheet" media="all" href="styles.css" /> </head> <body> <p>Apprenez le CSS avec drupalbook.org</p> <p>Deuxième ligne de texte avec drupalbook.org</p> </body> </html>
La balise <link> a ces attributs :
type="text/css" — indique que c’est un fichier CSS,
rel="stylesheet" — précise que ce fichier est une feuille de style,
media="all" — indique que la feuille s’applique à tous les appareils,
href="styles.css" — chemin relatif vers le fichier CSS.
Vous avez compris comment inclure un fichier CSS. Créez maintenant le fichier styles.css dans le même dossier que votre fichier HTML.
Ouvrez styles.css et mettez-y les styles CSS suivants :
body{
background: #eeeeee; /* fond de page */
font-size: 14px; /* taille du texte */
}
p{
color: #ff0000; /* couleur du texte */
}
Enregistrez ce fichier et ouvrez votre fichier HTML dans un navigateur. Votre CSS est maintenant correctement relié via un fichier séparé. Dans la prochaine leçon, nous verrons comment écrire les styles dans un fichier séparé en détail.