Feuilles de style en cascade

CSS est l'un des langages principaux du Web ouvert et a été standardisé par le W3C. Ce standard évolue sous forme de niveaux (levels), CSS1 est désormais considéré comme obsolète, CSS2.1 correspond à la recommandation et CSS3, qui est découpé en modules plus petits, est en voie de standardisation.

Ressources principales
Introduction à CSS
Dans ce module, on commence avec les bases du fonctionnement de CSS : les sélecteurs, les propriétés, écrire des règles CSS, appliquer du CSS à un document HTML, utiliser des longueurs, des couleurs et d'autres unités. On voit également la cascade et l'héritage en CSS, les bases du modèle de boîtes et comment déboguer du code CSS.

Mettre en forme le texte
Dans ce chapitre, on voit comment mettre en forme du texte : changer la police, mettre en gras, mettre en italique, gérer les espaces entre les lignes et les lettres, ajouter des ombres portées, etc. En fin de chapitre, on voit comment appliquer des polices personnalisées sur une page et comment mettre en forme les listes et les liens.

Mettre en forme les boîtes
Ensuite, on voit comment mettre en forme les boîtes CSS qui sont un composant clé de la mise en page d'une page web. Dans ce module, on revoit le modèle de boîtes, comment régler les propriétés de remplissage, bordures et marges, comment définir des couleurs d'arrière-plan, des images et aussi comment appliquer des ombres et des filtres sur les boîtes.

La disposition en CSS
Avant ce chapitre, on a vu les concepts fondamentaux en CSS, comment mettre en forme du texte, comment manipuler des boîtes correctement, etc. On voit ici comment correctement placer les boîtes dans la zone d'affichage (viewport). Grâce aux concepts précédents, on peut désormais étudier les différentes méthodes pour positionner les éléments sur une page : les boîtes flottantes, le positionnement fixe et les nouveaux outils comme les boîtes flexibles (flexbox).

Relier le fichier CSS au fichier HTML

Vaut-il mieux lier sa feuille de styles CSS avec la balise link ou utiliser la règle @import dans un bloc style ? C'est une question fréquemment posée, car les deux techniques aboutissent apparemment au même résultat.

La balise <link>

est une balise HTML qui n'est pas uniquement prévue pour lier des feuilles de styles, mais qui peut aussi faire référence à d'autres pages HTML sur le site, liées par une hiérarchie. Par exemple, il est possible d'indiquer la page suivante dans une série de documents, ou bien la page parente, pour remonter d'un niveau dans la navigation. On peut aussi l'utiliser pour faire indiquer une ressource extern .
Dans tous les cas, un élément présente au moins deux attributs: rel (type de relation) et href (ressource liée).
Exemple :

<link rel="stylesheet" href="habillage.css" type="text/css" media="screen" />
<link rel="stylesheet" href="texte.css" type="text/css" media="screen" />
<link rel="stylesheet" href="impression.css" type="text/css" media="print" />

La règle @import
Cette deuxième possibilité est intéressante car elle permet de créer des feuilles de styles plus évolutives (on lie un seul fichier depuis la page HTML, et on gère l'import des feuilles de styles directement depuis ce fichier CSS racine). Problème: ce fonctionnement peut légèrement ralentir le chargement des styles et donc de la page, et il est déconseillé dans une démarche d'optimisation des performances client.

Exemple :

<style type="text/css">
  @import url(/styles/habillage.css);
  @import url(/styles/texte.css);
</style>

À partir du moment où vous créez un fichier .css pour appliquer du style à votre page web (écrite dans un fichier .html), il vous faut lier ces deux fichiers. Ainsi, les propriétés CSS que vous ajoutez vont pouvoir s'appliquer aux balises HTML auxquelles vous souhaitez qu'elles s'appliquent.

Pour lier les fichiers .css et .html, vous allez rajouter une ligne dans le fichier .html pour indiquer au navigateur d'aller chercher la feuille de style (stylesheet en anglais) afin d'afficher la page web avec les propriétés de style qu'on lui a appliquées.

Cette ligne à rajouter dans le fichier .html s'ouvre avec la balise orpheline et on la place à l'intérieur de la balise :

 < h3>Relier le fichier css au fichier Html < /h3>

          < Head>
            < meta charset="utcf-8">
              < title>ma page< /title>
                  < link href="style.css" rel="stylesheet">
                    < /head>

Lorsque vous cliquerez sur votre fichier HTML pour l'ouvrir dans le navigateur, ce dernier aura l'instruction d'appeler le fichier CSS associé pour afficher les propriétés de style de la page web.

Dans la pratique, quelles sont les différences ?

En pratique, le résultat pour la présentation du document HTML est exactement le même, mais il y a deux subtilités importantes :

@import (CSS2) n'est pas reconnu par les très vieux navigateurs qui ne sont pas encore aux normes au niveau des CSS, par conséquent les styles seront appliqués partout sauf sur ces navigateurs dinosaures. Quel intérêt ? Tout simplement de permettre aux utilisateurs de ces dinosaures de consulter le site sans trop de problème. En effet, sans feuille de style le site reste mieux visible qu'avec des styles interprêtés n'importe comment. C'est donc une technique recommandée pour l'interopérabilité et la compatibilité ascendante.

Sur certains navigateurs @import réduit sérieusement les performances, car cette technique ne permet pas un chargement parallélisé de plusieurs feuilles de style en même temps, ce qui ralentit le rendu de la page et fait patienter le visiteur un peu plus que nécessaire. Pour en savoir plus à ce sujet, consultez l'article original Don't use @import par Steve Souders.

On pourra donc retenir, par précaution, qu'il vaut mieux n'utiliser @import qu'en connaissance de cause et en dernier recours.

Style CSS Externe, Interne et Inline

La principale différence entre le style CSS inline et le style CSS externe est que le CSS inline est traité plus rapidement. En effet, il ne nécessite que le téléchargement d’un seul fichier par le navigateur alors que l’utilisation du CSS externe nécessitera le téléchargement séparé des fichiers HTML et CSS

Dans cet article, nous allons comparer en profondeur les styles CSS : inline, externe et interne. Nous découvrirons également les avantages et les inconvénients de l’utilisation de chaque méthode.

CSS interne

Le CSS interne ou intégré exige que vous ajoutiez la balise style dans la section head de votre document HTML.

Ce style CSS est une méthode efficace pour styliser une seule page. Toutefois, l’utilisation de ce style pour plusieurs pages prend beaucoup de temps, car vous devrez placer des règles CSS sur chaque page de votre site Web.

Voici comment utiliser le CSS interne :

1. Ouvrez votre page HTML et repérez la balise d’ouverture head.

2. Mettez le code suivant directement après la balise head
   

 <style type="text/css"> 

1. Ajoutez les règles CSS sur une nouvelle ligne. Voici un exemple :

 body {
    background-color: blue;
}
h1 {
    color: red;
    padding: 60px;
}

1. Ajoutez la balise de fermeture :

</style>

Votre fichier HTML ressemblera à ceci :

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: blue;
}
h1 {
    color: red;
    padding: 60px;
} 
</style>
</head>
<body>

<h1>Hostinger Tutorials</h1>
<p>This is our paragraph.</p>

</body>
</html>

Les avantages du CSS interne :

Vous pouvez utiliser des sélecteurs de classe et des sélecteurs d’ID dans cette feuille de style. Voici un exemple :

.class {
    property1 : value1; 
    property2 : value2; 
    property3 : value3; 
}

#id {
    property1 : value1; 
    property2 : value2; 
    property3 : value3; 
}

Les inconvénients du CSS interne :

L’ajout du code au document HTML peut augmenter la taille et le temps de chargement de la page web.

CSS externe

Avec le CSS externe, vous liez vos pages Web à un fichier .css externe, qui peut être créé par n’importe quel éditeur de texte sur votre appareil (par exemple, Notepad++).

Ce type de CSS est une méthode plus efficace, notamment pour styliser un grand site Web. En modifiant un seul fichier .css, vous pouvez ainsi changer tout votre site en une seule fois.

Suivez les étapes suivantes pour utiliser un CSS externe :

1. Créez un nouveau fichier .css avec l’éditeur de texte, et ajoutez les règles de style. Par exemple :

.xleftcol {
   float: left;
   width: 33%;
   background:#809900;
}
.xmiddlecol {
   float: left;
   width: 34%;
   background:#eff2df;

  }

N’oubliez pas de remplacer style.css par le nom de votre fichier .css.

Les avantages du CSS externe :
Étant donné que le code CSS se trouve dans un document séparé, vos documents HTML auront une structure plus propre et seront plus petits
Vous pouvez utiliser le même fichier .css pour plusieurs pages.
Les inconvénients du CSS externe :
Vos pages pourraient ne pas rendre correctement jusqu’à ce que le CSS externe soit chargé.
Le téléchargement ou la liaison de plusieurs documents CSS peut augmenter le temps de téléchargement.

CSS inline

Le CSS inline est utilisé pour donner un style à un élément HTML spécifique. Pour ce style CSS, il vous suffit d’ajouter l’attribut style à chaque balise HTML, sans utiliser de sélecteurs.

Ce type de CSS n’est pas vraiment recommandé, car chaque balise HTML doit être stylisée individuellement. La gestion de votre site Web peut devenir trop difficile si vous n’utilisez que le CSS inline.

Toutefois, le CSS inline en HTML peut être utile dans certaines situations. Par exemple, dans les cas où vous n’avez pas accès aux fichiers CSS ou lorsque vous devez appliquer des styles pour un seul élément.

Prenons un exemple. Ici, nous ajoutons un CSS inline aux balises

et

<!DOCTYPE html>
<html>
<body style="background-color:black;">

<h1 style="color:white;padding:30px;">Hostinger Tutorials</h1>
<p style="color:white;">Something usefull here.</p>

</body>
</html>

Les avantages du CSS inline :

Vous pouvez facilement et rapidement insérer des règles CSS dans une page HTML. C’est pourquoi cette méthode est utile pour tester ou prévisualiser les modifications sur différents niveaux, et effectuer des corrections rapides sur votre site Web. Vous n’avez pas besoin de créer et de télécharger un document distinct comme avec le style externe.
Les inconvénients du CSS inline :

L’ajout de règles CSS à chaque élément HTML prend du temps et rend votre structure HTML désordonnée. Le stylisme de plusieurs éléments peut affecter la taille de votre page et le temps de téléchargement.

Conclusion

Dans cette article nous avons tout d'abord expliquer le CSS et son foctinnement ,ensuite nous avons parlé de la procedure pour relier le CSS au HTML comment cela se passe, et suite vous avez appris la différence entre les trois types de CSS : interne, externe et inline. Voici le récapitulatif :

Interne ou incorporé⁠:ajoutez la balise style dans la section head du document HTML
Externe⁠:liez la feuille HTML à un fichier .css distinct
Inline:appliquez des règles CSS pour des éléments spécifiques.

L'AUTEUR
Bienvenu K
Bienvenu KIPONGO est un passionné du marketing digital et Etudiant en développement web et web mobile au sein de la Kadea academy , notre article est écrit pour apporter à nos chers lecteur une meilleure compréhension de HTML et CSS et comment ces deux font une liaison.