Introduction :
La fonction principale des feuilles de style en cascade (Cascading Style Sheets - CSS) est très importante. Les feuilles de style en cascade fonctionnent avec le langage HTML pour fournir le style et l'apparence de base, ce qui nous permet de savoir à quoi ressembleront les éléments HTML sur la page Web. CSS3 est la dernière version de CSS. Dans cet article, nous allons voir les principales différences qui existent entre CSS, CSS2 et CSS3.
Obectif :
Montrer les différences qui existent entre les trois lagages de balisage CSS, CSS2 et CSS3.
Prérequis :
Aucune connaissance en programmation Web n'est nécessaire pour comprendre cet article.
Le cours :
Qu'est-ce que le CSS ?
Une feuille de style en cascade, communément appelée CSS, est la couche de style sur les éléments HTML, ou en termes plus simples, elle vous permet de styliser les éléments (police, taille, couleur et espacement) de vos pages et contenus HTML en leur appliquant délicatement des classes. CSS s'occupe de la présentation et vous aide à déterminer comment les pages et le contenu que vous créez avec HTML vont se présenter et s'afficher. CSS sera un sauveur une fois que vous aurez appris à maîtriser le code. Pour maîtriser le CSS, vous devez d'abord comprendre les différents types de CSS. Il existe essentiellement trois façons d'écrire du CSS, qui sont mentionnées ci-dessous.
Feuille de style ou CSS interne
L'utilisation d'une feuille de style interne signifie que le style que vous allez créer sera codé directement dans le code HTML de cette page particulière, juste entre les balises <style> et </style>. Elle est utilisée si vous souhaitez que le style soit utilisé dans le corps complet du code HTML.
Par exemple :
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
color: #010101;
}
</style>
</head>
<body>
</body>
</html>
Feuille de style ou CSS externe
L'utilisation d'une feuille de style externe signifie que vous créez un fichier avec l'extension .css et que vous l'utilisez ensuite dans votre page HTML en fonction de vos besoins. En général, la feuille de style externe est utilisée lorsque vous avez de nombreux attributs HTML et que vous souhaitez les utiliser selon vos besoins ; il n'est pas nécessaire d'écrire et de réécrire le style CSS encore et encore dans le document HTML. Il est recommandé d'utiliser une feuille de style externe principalement pour deux raisons.
- Elle permet d'économiser une grande partie du temps de chargement de votre page.
- Il est pratique d'avoir à peu près tout en un seul endroit.
Par exemple :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
</body>
</html>
CSS en ligne
L'utilisation d'un CSS en ligne signifie que chaque style de contenu va se trouver dans des éléments HTML. Il est utilisé pour une section limitée et dans le cas où vos exigences sont très faibles car il n'affectera qu'un seul élément. Si vous êtes un bon programmeur, il n'est pas recommandé d'utiliser le CSS en ligne car :
- Cela prend beaucoup de temps de spécifier le CSS sur chaque balise HTML.
- Le code deviendra assez gros et complexe.
Par exemple :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 style="color: blue; margin-left: 30px;">Titre 1</h1>
</body>
</html>
Une feuille de style interne est généralement utilisée par les blogueurs, une feuille de style externe est utilisée dans WordPress, et le CSS en ligne est utile en cas de besoin de corrections rapides.
Caractéristiques de CSS
1. Cohérence
Avec le CSS, il est facile d'apporter des modifications aux pages de votre site Web. En apportant un seul changement à votre feuille de style CSS, vous pouvez par conséquent le faire sur chaque page de votre site Web.
2. Compatibilité avec les navigateurs
La compatibilité avec les navigateurs est une chose très importante et, avec CSS, il est facile de s'en passer car cette question est bien traitée.
3. Apparence
Avec CSS, il est facile d'améliorer l'aspect et la convivialité du site Web à partir d'un seul endroit, car il vous permet d'utiliser un large éventail de styles étendus et expressifs.
4. Maintenabilité
Le CSS vous offre la possibilité de corriger et de modifier automatiquement chaque page de votre site Web dès qu'une modification est apportée à la feuille de style de votre site.
5. Gain de temps
Avec les feuilles de style CSS, vous ne devez spécifier les détails du style qu'une seule fois pour chaque élément et les styles spécifiés sont appliqués automatiquement à chaque fois que cet élément particulier apparaît. Vous gagnez donc beaucoup de temps en ne vous obligeant pas à tout réécrire encore et encore.
Principales différences entre CSS, CSS2 et CSS3
- Le CSS a été initialement publié en 1996 et se compose de propriétés permettant d'ajouter des propriétés de police telles que la police de caractères et la couleur d'accentuation du texte, des arrière-plans et d'autres éléments. CSS2 a été publié en 1998 et a ajouté des styles pour d'autres types de médias afin de pouvoir être utilisé pour la conception de la mise en page. CSS3 a été publié en 1999 et des propriétés de style de présentation ont été ajoutées, ce qui vous permet de construire une présentation à partir de documents.
- Contrairement à CSS2, qui était composé d'un seul document, CSS3 a ses spécifications divisées en plusieurs modules individuels, ce qui rend CSS3 beaucoup plus facile à manipuler.
- Avec CSS3, les concepteurs peuvent désormais utiliser des polices spéciales, comme celles disponibles dans Google Fonts et Typecast. Auparavant, avec CSS et CSS2, les concepteurs ne pouvaient utiliser que des "polices sûres pour le web" pour être sûrs à 100 % d'utiliser des polices qui s'afficheraient toujours de la même manière sur toutes les machines.
- Alors que CSS et CSS2 comportaient des "sélecteurs simples", CSS3 appelle les composants comme "une séquence de sélecteurs simples".
- CSS3 a apporté quelques considérations clés en matière de conception Web, comme les bordures arrondies, qui permettent d'arrondir les bordures sans problème. Cela s'est avéré être un énorme avantage pour les développeurs qui avaient du mal avec les versions initiales des bordures CSS.
- CSS3 a la capacité de diviser les sections de texte en plusieurs colonnes afin qu'elles puissent être lues comme un journal. En CSS2, les développeurs rencontraient des difficultés parce que la norme n'était pas équipée d'une fonction permettant de diviser automatiquement le texte pour qu'il tienne dans un cadre.
Pourquoi apprendre le CSS ?
CSS est une technologie de développement web qui est à l'origine de l'aspect et de la convivialité de chaque page web. Elle s'avère capable d'en faire beaucoup plus avec sa dernière évolution. Les versions de CSS ne cessent de s'améliorer au fil du temps, ce qui signifie essentiellement une meilleure plate-forme de programmation pour les développeurs, avec pour résultat des conceptions Web plus efficaces et plus rapides.
En 2022, le langage visuel le plus demandé et le plus important du web est CSS3. Il vous permet d'attirer l'attention des utilisateurs de votre site Web grâce à des pages Web à chargement rapide sur tous les navigateurs.
CSS3 vous permet de contrôler l'aspect visuel de votre site Web par le biais de la mise en page, de la superposition, de la typographie et des effets spéciaux. Vous pouvez facilement personnaliser n'importe quel thème pour WordPress ou créer le visuel de votre application ou site avec CSS3.
Conclusion :
CSS3 est la dernière version de CSS. Elle n'est compatible qu'avec IE9 et non avec les versions plus anciennes des navigateurs. Plus vous coderez, plus vous en apprendrez sur CSS3, mais il y a une chose à noter : vous ne pouvez pas maîtriser CSS3 si vous ne connaissez pas CSS. CSS3 a repris les propriétés de CSS et les a développées pour inclure de nouvelles fonctionnalités afin de faciliter l'utilisation par les concepteurs et développeurs. CSS3 est capable de prendre en charge les conceptions réactives et peut également gérer les requêtes média, contrairement à CSS, qui ne prend pas en charge les conceptions réactives et n'est pas capable de gérer les requêtes média. CSS3 est très important pour les concepteurs de sites Web, car il offre une vaste gamme d'options et contribue à créer des possibilités accrues pour la conception d'une page Web. Grâce à la conception de sites web, les spécialistes du marketing peuvent facilement accroître la notoriété de leurs produits sur le marché.
