Sans le CSS, les sites web sembleraient dépourvus d’intérêt. Ce langage de mise en forme est essentiel pour définir l’apparence, la taille, la couleur et l’emplacement du texte sur une page web.
Qu’est-ce que le CSS ?
Le terme CSS, acronyme de « Cascading Style Sheets » (feuilles de style en cascade), désigne un langage qui spécifie la manière dont les éléments HTML doivent être affichés sur un écran ou sur papier. Le CSS a été créé par le World Wide Web Consortium (W3C) en 1996.
Les éléments HTML n’étaient pas conçus pour intégrer des balises de mise en forme. Initialement, les développeurs se contentaient d’écrire du balisage pour la page. L’introduction de balises telles que `` avec HTML 3.2 a engendré de nouveaux problèmes.
Les pages web se sont enrichies d’arrière-plans colorés, de polices variées et de multiples styles. La réécriture du code est devenue fastidieuse et coûteuse. Le W3C a créé le CSS pour remédier à ces difficultés, et il a continué d’évoluer depuis lors.
Pourquoi utiliser le CSS ?
#1. Le CSS est performant
Le CSS permet d’éviter d’ajouter des balises pour la police, l’alignement, les bordures, la couleur, le style d’arrière-plan et la taille à chaque page web.
#2. Gain de temps
Il est aisé de modifier l’apparence d’un site web complet en modifiant le fichier CSS externe.
#3. Compatibilité multi-appareils
Les utilisateurs actuels accèdent aux sites via des appareils aux tailles d’écran diverses, comme les ordinateurs, les tablettes et les smartphones. Le CSS simplifie la création de pages web adaptables à ces différents formats.
#4. Maintenance facilitée
Les applications web modernes sont en constante évolution. Le CSS facilite la modification de composants spécifiques ou même de l’ensemble du site sans avoir à toucher à la base de code.
Comment le CSS est-il utilisé avec le HTML pour créer des sites web ?
Le HTML est le langage de balisage standard pour la création de pages web. Le CSS, quant à lui, détermine l’affichage de ces pages créées avec HTML. Une page web conçue à l’aide de HTML et CSS contiendra généralement un fichier HTML avec du texte, des liens d’images et des balises HTML.
Ce fichier HTML peut être lié à un fichier CSS externe par une balise de lien, ou intégrer des styles CSS internes ou en ligne. Un fichier HTML peut contenir un titre, par exemple `
`, et un paragraphe, noté `
`. Le CSS permet de demander au navigateur d’afficher tout le texte du paragraphe en gras ou de spécifier une taille de 50 pixels et une couleur verte pour l’en-tête.
Nous détaillerons le fonctionnement combiné de HTML et CSS dans la section suivante.
Types de CSS
#1. CSS externe
Le CSS est dit « externe » quand un fichier HTML est lié à un fichier CSS distinct avec l’extension .css (par exemple, style.css). La liaison entre ces fichiers se fait via une balise `link` dans le HTML.
Exemple de fichier CSS externe :
.main {
text-align:center;
}
.GF {
color:red;
font-size:50px;
font-weight:bold;
}
#TP {
color:blueviolet
font-style:bold;
font-size:20px;
}Le fichier CSS peut être lié au document HTML suivant :
<html>
<head>
<link rel="stylesheet" href="https://wilku.top/12-best-online-courses-and-books-to-master-css/style.css"/>
</head>
<body>
<div class = "main">
<div class ="GF">Geek Flare!!!! </div>
<div id ="TP">
Your favourite tech portal
</div>
</div>
</body>
</html>La balise `link` établit le lien avec la feuille de style externe, tandis que l’attribut `href` précise son emplacement.
La page web rendue se présentera comme suit :
Le CSS externe est la méthode la plus recommandée car elle facilite la création de composants réutilisables et permet d’appliquer des modifications globales à la base de code.
#2. CSS interne
Le CSS interne est adapté lorsqu’il s’agit de styliser un seul document HTML de manière spécifique. Les règles de style sont définies dans la section `
Voici un exemple de CSS interne :
<html>
<head>
<title>Internal CSS Example</title>
<style>
.main {
text-align:center;
}
.GF {
color:Red;
font-size:70px;
}
.custom {
font-style:bold;
font-size:20px;
}
</style>
</head>
<body>
<div class = "main">
<div class ="GF">Internal CSS Demonstration</div>
<div class ="custom">
The Results
</div>
</div>
</body>
</html>La page web rendue se présentera comme suit :
Le CSS interne est généralement moins conseillé car il alourdit le code du document HTML, ce qui peut affecter la vitesse de chargement.
#3. CSS en ligne
Le CSS en ligne inclut le style directement dans le corps de l’élément. On peut, par exemple, styliser un paragraphe, un titre ou une division à l’aide de CSS en ligne.
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<p style = "color:red; font-size:50px;
font-style:bold; text-align:center;">
Inline CSS Demonstration
</p>
</body>
</html>Le rendu de ce document sera le suivant :
Le CSS en ligne est déconseillé pour des applications web évolutives, car l’ajout de propriétés CSS à chaque balise HTML est chronophage.
Voici une sélection des meilleurs cours et livres en ligne pour maîtriser le CSS.
Concevez des sites web adaptatifs avec HTML et CSS
Ce cours axé sur la création de sites web adaptatifs vous apprend à concevoir des sites qui s’ajustent à toutes les tailles d’écran grâce à HTML5 et CSS3. Aucune connaissance préalable n’est requise. Vous explorerez des concepts clés tels que le modèle de boîte, la résolution des conflits de sélecteurs, les schémas de positionnement et l’héritage.
C’est également le cours idéal pour apprendre à penser, planifier, schématiser, coder, tester et optimiser un site web professionnel.
CSS avancé et Sass
Ce cours explore les mécanismes internes du CSS, notamment la cascade, la spécificité et l’héritage. Il présente également de nombreuses techniques modernes pour créer des pages web dynamiques et adaptatives.
Le cours aborde également Sass et son intégration dans des projets, la création d’une architecture CSS, la gestion des variables globales et des requêtes média. Enfin, il introduit l’animation CSS avec les @keyframes, les animations et les transitions.
Apprendre le CSS
Ce cours de Codecademy enseigne comment utiliser le CSS pour transformer visuellement le HTML en sites web attractifs. Il est structuré en 8 leçons, avec 6 projets pour évaluer vos acquis.
Vous apprendrez principalement à styliser les éléments HTML, à connecter les fichiers HTML et CSS, et à créer des mises en page originales pour les pages web.
Créez votre première page web avec HTML et CSS
Ce cours vous montre comment utiliser HTML5 et CSS3 pour créer des sites web adaptatifs. Il est gratuit, divisé en 4 modules, et dure environ 10 heures. Aucune connaissance préalable en programmation n’est nécessaire.
Bases du CSS
Ce cours proposé par W3Cx aborde les meilleures pratiques de conception web, les sélecteurs CSS fondamentaux et la sélection des propriétés CSS. Il est divisé en 5 modules, et nécessite environ 5 semaines à raison de 5 à 7 heures d’étude par semaine.
Introduction à CSS3
Ce cours de l’université du Michigan est une introduction aux feuilles de style en cascade. Il vous apprendra à écrire des règles CSS, à adopter de bonnes pratiques de programmation et à tester votre code. Il nécessite environ 12 heures d’étude et inclut un certificat partageable à la fin.
Introduction au HTML et au CSS
Ce cours d’introduction enseigne comment construire des sites web stylisés et bien structurés avec HTML et CSS. Vous apprendrez à créer des sites web en utilisant une structure arborescente, puis à les mettre en forme avec CSS. Le cours est gratuit, convient aux débutants, et suit un rythme d’apprentissage personnalisé. Prévoyez environ 3 semaines pour le terminer.
Tutoriel CSS
Ce tutoriel gratuit proposé par W3schools est structuré en chapitres pour faciliter la compréhension. Chaque chapitre propose des exemples et des exercices. La plateforme offre un environnement en ligne pour expérimenter les concepts avec le bouton « Essayez-le vous-même ».
CSS : le guide ultime
Ce livre est une ressource précieuse pour apprendre les fondements du CSS, des sélecteurs à la spécificité et à la cascade. Il aborde en détail les astuces pour utiliser les flexbox, le positionnement et les flottants.
Il est également recommandé pour approfondir les transformations, les transitions et les animations 2D et 3D en CSS. Il est disponible en version numérique (Kindle) et papier.
Conception web adaptative avec HTML5 et CSS
Ce livre vous guide dans la création de sites web adaptatifs et durables à l’aide de HTML5 et CSS. Les techniques présentées vous permettront de créer des sites web fonctionnant parfaitement sur ordinateurs, tablettes et téléphones mobiles. Il est écrit de manière accessible et disponible en version papier et Kindle.
HTML et CSS : concevoir et créer des sites web
Ce livre est une excellente ressource, que vous soyez amateur, étudiant ou professionnel. L’auteur utilise des graphiques et des photographies pour illustrer les différents concepts et faciliter la compréhension. La structure unique de l’ouvrage facilite la navigation à travers les chapitres.
CSS Moderne
Ce livre enseigne le CSS par le biais d’exemples de code, de schémas et de captures d’écran. Il débute avec les couleurs, les sélecteurs, le modèle de boîte, les combinateurs et la spécificité. Il aborde ensuite le style du texte, le positionnement, les dégradés, les bordures, l’index Z et les contextes d’empilement. Enfin, il couvre des sujets avancés tels que les transitions, les animations, les transformations, les flexbox et les grilles CSS.
Conclusion
Le rôle du CSS dans les sites web modernes est essentiel. En plus d’améliorer l’attractivité visuelle des pages, il facilite la navigation. L’apprentissage du CSS peut être simplifié grâce aux ressources listées ci-dessus, dont certaines sont gratuites et d’autres payantes.
Pour aller plus loin, vous pouvez consulter les antisèches CSS pour développeurs et designers.