Tutos CSS

CSS c'est quoi ? Un peu d'histoire

Le langage CSS – Cascading Style Sheets – est utilisé pour définir l'aspect d'un site Internet. CSS trouve ses origines dans le premier navigateur Internet, WorldWideWeb – ultérieurement renommé Nexus –, au début des années 90. A cette époque, les styles n'étaient pas déterminés par l'auteur du document mais par le navigateur lui-même.

CSS apparaît entre 1994 et 1995 lorsque se fait sentir la nécessité d'un langage de présentation, suppléant au langage de structuration qu'est HTML. C'est grâce aux efforts conjugués de Bert Bos et Håkon Wium Lie, que l'idée de « style en cascade » s'impose. Il faut attendre 1998, la fin de la guerre des navigateurs, pour qu'il soit implémenté dans la plus grande partie des navigateurs. Ce n'est pourtant qu'au début des années 2000 que le langage se taille une place de standard au même titre qu'HTML.

CSS a connu plusieurs niveaux d'évolution : CSS1, puis, version 2 – apparue en 1998 –, 2.1 et enfin CSS 3 – lancé dès 1999, parallèlement à la version 2.1. Aujourd'hui, la version 3, est supportée par tous les navigateurs et utilisée par une grande partie des sites Internet. On parle également depuis peu de son évolution : le CSS 4

Description du langage CSS

CSS est un langage de programmation relativement simple, complémentaire d'HTML, qui permet au concepteur d'un site Internet d'en définir l'apparence, la mise en page, la mise en forme.
Ainsi, vous allez pouvoir modifier la couleur d'un mot, le choix de la police par défaut, sa taille. Vous pourrez ajouter des ombres portées, jouer avec les dégradés. Fixer des éléments sur une interface, comme un menu. Décider de l'apparence de vos boutons, de la couleur de survol ou bien de mettre en place des effets de flous.

Il donne également la possibilité à l'utilisateur de paramétrer une apparence spécifique depuis son navigateur. Cela peut s'avérer pratique, pour modifier la taille du texte ou bien la basculer d'un mode clair à sombre (appelé darkmode).
Le CSS vous aidera ainsi à rendre vos interfaces plus accessibles. C'est également grâce à lui que vous pourrez concrètement améliorer l'expérience utilisateur.

Mais vous allez me demander : où et comment écrit-on le CSS pour styliser une page ?
Comme tous les langages de programmation, vous n'avez pas besoin de grand chose pour coder et écrire vos première lignes. Un simple bloc note suffit.
Evidemment, il existe des logiciels dédiés qui vous faciliteront l'écriture du code. C'est ce qu'on appelle un IDE. Par exemple Brackets, PHP Storm, Visual Studio Code Sublime Text pour ne citer qu'eux. L'extension de votre feuille de style sera .css.

Son utilisation est complémentaire aux balises HTML. Il simplifie les modifications de styles. En effet, là où un code HTML nécessite une modification ligne par ligne des effets de style, CSS offre la possibilité de modifier d'un seul coup l'ensemble des items (par exemple l'ensemble des titres).

La séparation des fichiers de structure des documents (.html) et d'apparence (.css) permet également une plus grande efficacité. En cela que la conception du document ne mélange pas des éléments sans rapport et permet au rédacteur de se concentrer sur un aspect à la fois. En général le code est écrit dans une feuille de style css séparée (même si dans certains cas il peut être directement intégré dans la page en question).

En outre, un même document peut être présenté selon diverses feuilles de styles : une pour l'impression, une pour la lecture à l'écran.
Enfin, la lecture du code HTML est simplifiée, le fichier « structure » étant dépouillé de toutes les spécifications de styles.

Aujourd'hui CSS évolue sans cesse et est mis à jour régulièrement. Une des avancées a été l'apparition des mediaqueries qui ont permis de déployer des pages en Responsive Design. 
De nouvelles propriétés comme Flexbox, CSS Grid permettent également de gérer plus facilement le positionnement des différents éléments d'une page web. D'autres propriétés encore permettent aujourd'hui d'animer les éléments d'une page web. 

Notez que des frameworks CSS comme Bootstrap ou Tailwind CSS permettent de déployer plus rapidement des pages HTML et CSS. Enfin Less ou Sass (Syntactically Awesome StyleSheets) -extension .scss - vous permettront de rendre dynamique votre code. Toujours dans l'optique de rendre votre travail d'intégrateur front end plus efficace au quotidien.

Comment apprendre CSS avec nos tutos et formations en ligne ?

Améliorez vos compétences dès maintenant grâce aux formations disponibles sur Tuto.com.
Nos formateurs aguerris apportent un grand soin à leurs tutos.

Grâce à ces cours en vidéo, vous pourrez apprendre à mettre en forme vos pages web. Vous apprendrez quelles propriétés CSS sont compatibles ou pris en charge avec tels ou tels navigateurs web (comme Internet Explorer, Firefox, Safari...). Vous apprendrez à créer un code CSS qui s'adaptera à la taille des différents écrans (c'est ce qu'on appelle le responsive design), à le rendre dynamique, à utiliser des frameworks. Bref, ces tutoriels vous aideront à devenir super efficaces dans la mise en forme de vos pages.
Vous ne serez pas seul dans l'apprentissage de ce langage. Vous pourrez poser vos questions dans le salon d’entraide de nos différents cours, échanger avec un mentor. Enfin, si vous souhaitez commencer à vous former sans dépenser le moindre centime, des tuto gratuits sont disponibles. 

Pour les plus courageux d'entre vous, vous pourrez même vous ré-orienter vers le métier de développeur web ou développeur frontend grâce à notre parcours de formation 100% à distance.
Ce dernier peut être financé par Pole Emploi, votre Entreprise et même votre compte CPF.

Ce parcours aborde non seulement le langage CSS, mais vous donnera également des bases solides en HTML. Il vous permettra également d'acquérir des compétences en Javascript. Et donc de travailler avec les frameworks modernes.
Enfin, un bon front end développeur, doit en plus de savoir intégrer des maquettes, développer d'autres aptitudes.
En effet, les bases du référencement naturel (SEO), et de webperformance, complètent aujourd'hui les connaissances en programmations web. Vos pages, votre site doivent être visibles par les moteurs de recherche. Mais ce n'est pas tout : la vitesse de chargement est également à prendre en compte. Vous le voyez le travail du dev front end est beaucoup complet qu'il n'y parait !
Si vous souhaitez plus d'information sur ce parcours de formation, n'hésitez pas à prendre contact avec notre équipe. Nous vous accompagnerons dans toutes les démarches, jusqu'à la réussite de votre apprentissage.
 

Liens utiles

• Tutos CSS gratuits