CSS - Inclusion
Bonjour là-bas, aspirants développeurs web ! Aujourd'hui, nous allons plonger dans le monde passionnant de l'inclusion CSS. En tant que votre enseignant de quartier en informatique, je suis là pour vous guider à travers les différentes manières d'ajouter un peu de style à nos documents HTML. Alors, prenez une tasse de café (ou de thé, si c'est votre truc), et c'est parti !
CSS Intégré - L'élément <style>
Commençons par la manière la plus simple d'inclure du CSS dans votre document HTML : l'élément <style>. Imaginez que vous vous habillez pour une fête. L'élément <style> est comme choisir votre tenue et la mettre avant de quitter la maison.
Voici à quoi cela ressemble :
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
text-align: center;
}
</style>
</head>
<body>
<h1>Bienvenue sur ma page stylée !</h1>
</body>
</html>Dans cet exemple, nous avons défini des styles pour les éléments body et h1. Le body aura un arrière-plan gris clair et utilisera la police Arial, tandis que l'h1 sera gris foncé et centré.
CSS Inline - L'attribut style
Passons maintenant au CSS inline. C'est comme accessoiriser votre tenue avec un chapeau voyant ou une jolie chaîne juste avant de sortir.
Voici un exemple :
<p style="color: blue; font-size: 18px;">Ceci est un paragraphe bleu avec une police plus grande.</p>Dans ce cas, nous avons appliqué des styles directement à l'étiquette <p> en utilisant l'attribut style. Le texte sera bleu et aura une taille de police de 18 pixels.
CSS Externe - L'élément <link>
Maintenant, parlons du CSS externe. C'est comme avoir un dressing séparé rempli de différentes tenues que vous pouvez choisir pour toute occasion.
Premièrement, créez un fichier CSS séparé (appelons-le styles.css) :
/* styles.css */
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
text-align: center;
}Ensuite, liez-le à votre fichier HTML :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Bienvenue sur ma page stylée !</h1>
</body>
</html>L'élément <link> indique au navigateur où trouver notre fichier CSS. C'est comme donner des indications pour votre dressing !
CSS Importé - La règle @import
La règle @import est comme avoir un styliste personnel qui vous apporte des tenues de différentes boutiques. Elle vous permet d'importer un fichier CSS dans un autre.
Dans votre fichier CSS principal :
/* main.css */
@import url('typography.css');
@import url('colors.css');
body {
background-color: #f0f0f0;
}Ici, nous importons deux autres fichiers CSS dans notre fichier CSS principal. C'est une excellente façon d'organiser vos styles !
Priorité des Rules CSS
Maintenant, parlons de ce qui se passe lorsque les styles entrent en conflit. C'est comme lorsque vous essayez de décider entre deux tenues et qu'une d'elles doit l'emporter.
Voici un tableau de la spécificité CSS, de la moins spécifique à la plus spécifique :
| Type de sélecteur | Exemple | Specificité |
|---|---|---|
| Élément | p |
1 |
| Classe | .highlight |
10 |
| ID | #header |
100 |
| Inline | style="color: red;" |
1000 |
Plus un sélecteur est spécifique, plus il a une priorité élevée. Par exemple :
<style>
p { color: blue; }
.highlight { color: yellow; }
#special { color: green; }
</style>
<p class="highlight" id="special" style="color: red;"> Quelle couleur suis-je ?</p>Dans ce cas, le texte sera rouge car les styles inline ont la plus haute spécificité.
Prise en charge des anciens navigateurs
Parfois, nous devons nous adapter aux anciens navigateurs qui ne comprennent pas notre nouveau CSS sophistiqué. C'est comme avoir une tenue classique prête au cas où.
background-color: #f0f0f0; /* Solution de secours pour les anciens navigateurs */
background-color: rgba(240, 240, 240, 0.5); /* Navigateurs modernes avec transparence alpha */Ici, nous fournissons une couleur unie pour les anciens navigateurs et une couleur semi-transparente pour les navigateurs modernes.
Comments CSS
Enfin, parlons des commentaires CSS. Ils sont comme de petits messages que vous laissez pour vous-même (ou pour d'autres développeurs) pour expliquer vos choix de style.
/* Cela est un commentaire CSS */
body {
background-color: #f0f0f0; /* Arrière-plan gris clair */
font-family: Arial, sans-serif; /* Utilisation d'une police sans serif pour une meilleure lisibilité */
}Les commentaires sont ignorés par les navigateurs mais peuvent être extrêmement utiles pour comprendre et maintenir votre code.
Et voilà, les amis ! Nous avons couvert les différentes manières d'inclure du CSS dans vos documents HTML, des styles intégrés aux feuilles de style externes. Souvenez-vous, la pratique rend parfait, donc n'ayez pas peur d'expérimenter avec différentes méthodes et voyez ce qui fonctionne le mieux pour vos projets. Bonne stylisation !
Credits: Image by storyset