HTML - Feuille de style

Les feuilles de style en cascade (CSS) décrivent la façon dont les documents sont présentés sur les écrans, sur papier, ou peut-être comment ils sont prononcés. Le W3C a activement promu l'utilisation des feuilles de style sur le Web depuis la création du consortium en 1994.

Les feuilles de style en cascade (CSS) fournissent des alternatives simples et efficaces pour spécifier divers attributs pour les balises HTML. En utilisant CSS, vous pouvez spécifier un certain nombre de propriétés de style pour un élément HTML donné. Chaque propriété a un nom et une valeur, séparés par deux points (:). Chaque déclaration de propriété est séparée par un point-virgule (;).

Exemple

Considérons d'abord un exemple de document HTML qui utilise la balise <font> et les attributs associés pour spécifier la couleur du texte et la taille de la police -

Note- La balise font est obsolète et devrait être supprimée dans une future version de HTML. Donc, ils ne devraient pas être utilisés à la place, il est suggéré d'utiliser des styles CSS pour manipuler vos polices. Mais toujours à des fins d'apprentissage, ce chapitre fonctionnera avec un exemple utilisant la balise font.

<!DOCTYPE html>
<html>

   <head>
      <title>HTML CSS</title>
   </head>
	
   <body>
      <p><font color = "green" size = "5">Hello, World!</font></p>
   </body>

</html>

Nous pouvons réécrire l'exemple ci-dessus à l'aide de la feuille de style comme suit -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML CSS</title>
   </head>

   <body>
      <p style = "color:green; font-size:24px;" >Hello, World!</p>
   </body>

</html>

Cela produira le résultat suivant -

Vous pouvez utiliser CSS de trois manières dans votre document HTML -

  • External Style Sheet - Définissez les règles de feuille de style dans un fichier .css séparé, puis incluez ce fichier dans votre document HTML à l'aide de la balise HTML <link>.

  • Internal Style Sheet - Définissez les règles de feuille de style dans la section d'en-tête du document HTML à l'aide de la balise <style>.

  • Inline Style Sheet - Définissez les règles de feuille de style directement avec les éléments HTML en utilisant style attribut.

Voyons les trois cas un par un à l'aide d'exemples appropriés.

Feuille de style externe

Si vous devez utiliser votre feuille de style sur plusieurs pages, il est toujours recommandé de définir une feuille de style commune dans un fichier séparé. Un fichier de feuille de style en cascade aura l'extension comme.css et il sera inclus dans les fichiers HTML en utilisant la balise <link>.

Exemple

Considérez que nous définissons un fichier de feuille de style style.css qui a les règles suivantes -

.red {
   color: red;
}
.thick {
   font-size:20px;
}
.green {
   color:green;
}

Ici, nous avons défini trois règles CSS qui seront applicables à trois classes différentes définies pour les balises HTML. Je suggère que vous ne devriez pas vous soucier de la façon dont ces règles sont définies car vous les apprendrez tout en étudiant le CSS. Utilisons maintenant le fichier CSS externe ci-dessus dans notre document HTML suivant -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML External CSS</title>
      <link rel = "stylesheet" type = "text/css" href = "/html/style.css">
   </head>

   <body>
      <p class = "red">This is red</p>
      <p class = "thick">This is thick</p>
      <p class = "green">This is green</p>
      <p class = "thick green">This is thick and green</p>
   </body>

</html>

Cela produira le résultat suivant -

Feuille de style interne

Si vous souhaitez appliquer des règles de feuille de style à un seul document, vous pouvez inclure ces règles dans la section d'en-tête du document HTML à l'aide de la balise <style>.

Les règles définies dans la feuille de style interne remplacent les règles définies dans un fichier CSS externe.

Exemple

Réécrivons à nouveau l'exemple ci-dessus, mais ici nous écrirons les règles de feuille de style dans le même document HTML en utilisant la balise <style> -

<!DOCTYPE html> 
<html>
 
   <head> 
      <title>HTML Internal CSS</title> 
      
      <style type = "text/css"> 
         .red { 
            color: red; 
         } 
         .thick{ 
            font-size:20px; 
         } 
         .green { 
            color:green; 
         } 
      </style> 
   </head>
	
   <body> 
      <p class = "red">This is red</p>  
      <p class = "thick">This is thick</p>  
      <p class = "green">This is green</p>  
      <p class = "thick green">This is thick and green</p> 
   </body>
	
</html>

Cela produira le résultat suivant -

Feuille de style en ligne

Vous pouvez appliquer des règles de feuille de style directement à n'importe quel élément HTML en utilisant styleattribut de la balise concernée. Cela ne doit être fait que lorsque vous souhaitez apporter une modification particulière à un élément HTML uniquement.

Les règles définies en ligne avec l'élément remplacent les règles définies dans un fichier CSS externe ainsi que les règles définies dans l'élément <style>.

Exemple

Réécrivons à nouveau l'exemple ci-dessus, mais ici, nous écrirons des règles de feuille de style avec les éléments HTML en utilisant style attribut de ces éléments.

<!DOCTYPE html> 
<html>
 
   <head> 
      <title>HTML Inline CSS</title> 
   </head>
 
   <body> 
      <p style = "color:red;">This is red</p>  
      <p style = "font-size:20px;">This is thick</p>  
      <p style = "color:green;">This is green</p>  
      <p style = "color:green;font-size:20px;">This is thick and green</p> 
   </body>
 
</html>

Cela produira le résultat suivant -