Feuille de style en cascade (Cascading Style Sheets)

Table des matières:

Pourquoi CSS ?
Types de feuilles de style
1. Feuille de style en ligne
2. Feuille de style incorporée
3. Feuille de style externe
4. Feuille de style emportée
Conclusion

Le style des documents HTML a pendant longtemps été géré par certaines balises HTML de formatages. Ces balises sont :

<u></u> pour souligner un texte,
<i></i> pour mettre le texte en italique,
<b></b> pour mettre le texte en gras

Parfois, le style était géré par la combinaison d’un élément avec ses attributs, à savoir l’élément combiné par ses attributs tels que :

face, pour déterminer la police du text
color, pour déterminer la couleur du texte
size, qui permet de déterminer la taille du texte en pixel

Et le problème qui revient avec ce type de style est qu’on est obligé de reproduire tout le temps le même style a des endroits différents lorsque l’élément HTML figure plusieurs fois sur notre page. Le plus difficile est lorsqu’on doit appliquer le même style sur des documents différents

Pour pallier ces problématiques, le Cascading Style Sheet (CSS) ou Feuille de Style en Cascade a été introduit en 1996.

Pourquoi CSS ?

Une feuille de style est avant tout un document définissant un groupe de style. Avec le CSS, la mise en page et la définition de l’apparence d’un élément HTML est devenue beaucoup plus simple. En effet, la même déclaration de style peut avoir effet sur plusieurs pages et plusieurs éléments. Le CSS permet au HTML de faire qu’une seule chose (formatage du document), et lui, il se charge de l’apparence du document.

Types de feuilles de style

Il existe différentes façons d’appliquer du CSS à un document HTML. Parmi ces méthodes, il existe :

Feuille de style en ligne
Feuille de style incorporée
Feuille de style externe
Feuille de style importée

1. Feuille de style en ligne

Il peut être effectué à l’aide de l’attribut HTML style sur un élément. Ce type de style n’est pas avantageux d’autant plus que le style va simplement se limiter sur ce seul élément HTML. A titre d’exemple, on a:

<p style="font-size: 25px">Je suis un article de Bakeli</p>

2. Feuille de style incorporée

Il consiste à écrire le CSS entre les balises <style></style> ensuite les incorporer dans les balises Ce type de feuille de style est bénéfique, car il permet de créer un style qui va s’appliquer sur toute la page.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bakeli School</title>
  <style>
    p{
      color: red
    }
  </style>
</head>
<body>
    <p>Venez nous rejoindre</p>
</body>
</html>

Ce style incorporé va rendre tous les paragraphes de la page en rouge. Son inconvénient est qu’il se limite uniquement sur un seul document.

Afin de permettre d’inclure le style dans n’importe quel fichier HTML, la feuille de styles externe est introduite

3. Feuille de style externe

Autrement appelé feuille de style lié, il permet d’écrire le CSS dans un fichier séparé avec l’extension .css. Ensuite ce fichier sera lié au document HTML en utilisant l’élément ensuite l’inclure dans le .

Considérons cet exemple:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bakeli School</title>
  <link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
    <p>Venez nous rejoindre</p>
</body>
</html>

Et dans style.css on a:

body{
  background-color: #555;
}
p{
  color: #eee;
}

Dans cet exemple, on a changé la couleur de fond de notre page, ensuite changer la couleur de tous les paragraphes.

4. Feuille de style emportée

Bien vrai que cette feuille de style n’est pas trop connue ni utilisée, elle représente une bonne manière d’écrire du CSS, surtout lorsque vous avez beaucoup de feuilles de styles à créer. En effet, vous pouvez créer un seul fichier CSS (style.css) à inclure dans le fichier HTML. Ce fichier CSS peut importer d’autres fichiers CSS à l’aide du mot clé @import.

Le problème avec cette syntaxe est qu’il faut faire attention à la cascade CSS. Le navigateur va tout le temps lire le style du dernier fichier s’il rencontre le même sélecteur avec le même style sur plusieurs fichiers différents.

Voici comment vous pouvez le faire :

main.css

p{
    color: red;
}

on importe le style de main.css sans style.css

@import main.css
 
div{
   background-color: lime;
}

on va maintenant pouvoir utiliser une seule feuille de style

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bakeli School</title>
  <link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
    <p>Venez nous rejoindre</p>
    <div>Je suis un div</div>
</body>
</html>

Conclusion

En gros, nous pouvons retenir qu’il existe quatre façons d’écrire du CSS. Chacun a ses avantages comme inconvénients. Avant d’utiliser une methode, veuillez pesez ses avantages ainsi que ses inconveinients tout en faisant attention au cascade css

Conseil: Utilisez des feuilles de styles externes.

Nos formations

Formations Certiﬁantes

Formations Diplômantes