Le CSS ou Cascading Style Sheets (feuilles de style en cascade), est un langage informatique incontournable pour la mise en forme des pages sur internet.
Ça ne vous en dit pas beaucoup plus, mais sachez qu’aujourd’hui, tous les sites Internet possèdent des informations en CSS.
Nous allons faire un petit retour en arrière, aux origines du CSS, pour ensuite voir quand l’utiliser.
L’historique du CSS
Ce langage a vu le jour au début des années 1990. Mais il a fallu attendre fin 1996 pour une première association avec l’HTML3. Toutefois, cette version ne permettait de modifier que la couleur du texte, les caractères et la police.
Après la version 2, la version 3 (logique). Elle a résolu de nombreux problèmes et permet aujourd’hui de gérer la totalité de la mise en forme d’un site internet avec de multiples fonctions. On retrouve souvent la dénomination HTML5/CSS3.
Cette version est en constante évolution et les équipes de développement du CSS continuent de faire évoluer ce langage pour s’adapter à la mutation permanente du web.
Pour les plus intéressés, voici une petite vidéo explicative sur ces deux notions.
Vidéo issue du tutoriel Apprendre HTML5 & CSS3 rapidement et facilement
Quand l’utiliser ?
Dès que vous avez besoin de mettre en forme une page web 😆
Dans le processus de création, les développeurs définissent souvent le contenu en premier. Si vous affichez une page HTML simple, vous ne retrouvez qu’une succession d’éléments qui se suivent, avec des retours à la ligne pour chacun.
Ensuite ils le mettent en forme : c’est là que le CSS entre en jeu. Un titre plus ou moins gros, une image centrée dans du texte., un bloc qui s’aligne à droite du précédent.
Tout cela semble très basique, mais aujourd’hui le CSS permet bien des subtilités, et même d’animer des éléments.
Dans tous les cas, il organise les différentes parties d’un site.
Après tout, regardez comment sont généralement organisés les sites web :
- Un header (l’entête du site)
- Un menu (contenu dans l’entête, sur le côté ou quand on clique sur un bouton (surtout sur mobile)
- Le contenu principal
- Un footer (le bas de page)
Tout cela est parfaitement organisé grâce au CSS. Comme le sont tous les éléments à l’intérieur : blocs de texte, vidéos, images, boutons…
Et le site garde une cohérence entre chaque page grâce aussi à l’utilisation de ce CSS.
Notez que la gestion de ces feuilles de style relève de la compétence du Développeur Front-End.
Comment le CSS fonctionne-t-il ?
À la différence de l’HTML, le CSS ne permet pas de créer une page web.
C’est aussi un langage côté client. C’est donc votre navigateur qui lit le code CSS et le transpose pour mettre en forme le fichier HTML. Il peut exister des problèmes de compatibilité. Mais, aujourd’hui, à part si votre navigateur web date de l’Âge de pierre, c’est plutôt rare.
Vous avez plusieurs possibilités pour faire appel au CSS :
- directement dans une balise de votre code HTML,
- dans la balise head de votre page web, entre une balise <style>
- dans un ou plusieurs fichiers CSS.
C’est cette troisième solution qui vaut le nom de CSS. En effet, le fait d’appeler différents fichiers pour la mise en forme correspond à la cascade de feuilles de style.
Bien évidemment, pour comprendre et exploiter le CSS, il faut maîtriser le HTML. Tuto.com vous propose d’ailleurs une formation complète à ce sujet pour comprendre les bases du HTML, CSS, Javascript et PHP et ainsi devenir autonome 😉
Formation Apprendre les bases du HTML, CSS, Javascript et PHP en moins de 3 semaines !
Exemples d’intégration de style CSS
Parce qu’il est beaucoup plus simple de comprendre avec des exemples, nous allons vous montrer ce que donne le code dans les trois solutions précédentes pour colorer le titre h1 en bleu d’une page web 👨💻
Première façon, dans une balise
<h1 style="color:blue;">Mon titre<h1>
La seconde : entre les balises head d’une page web
<style> h1 { color: blue; } </style>
La troisième avec le CSS dans un fichier *.css
Dans un premier temps, le fichier HTML appelle le code CSS grâce à cette ligne entre les balises head :
<link rel="stylesheet" type="text/css" href="style.css" />
Ainsi vous appliquez le style qui est écrit comme dans la seconde solution (sans la balise style). Vous pouvez organiser votre fichier et faire des changements pour toutes les balises ou les classes que vous souhaitez. Par exemple vous pouvez choisir que tous les h1 de votre site soient pareils. C’est beaucoup moins lourd que de le faire à chaque création de pages.
C’est surtout bien plus pratique en cas de modification de votre charte graphique qui peut se faire en modifiant uniquement le CSS.
Conclusion
Ce langage informatique a mis plusieurs années pour devenir la référence de la mise en page des sites web. Même avec les CMS, vous pouvez modifier l’apparence d’un site avec des lignes de code en CSS. Une nouvelle façon de faire avec les flexbox rend le CSS encore plus efficace.
Le CSS permet de modifier la forme d’une balise HTML, d’une classe (nom que l’on peut donner à plusieurs balises pour les différencier), ou d’un élément en particulier.
Bref vous pouvez tout faire avec le CSS, le tout est de bien maitriser ce langage 😉
Le métier de Développeur vous intéresse ?
Tuto.com vous propose des parcours de formation 100% en ligne et dédiés à ce métier avec notamment plusieurs spécialités :
Chacun d’eux regroupe des centaines d’heures de formation 100% à distance pour une évolution à votre rythme, le tout aux côtés d’un mentor.
Vous avez des questions à ce sujet ? N’hésitez pas à contacter notre équipe support !