Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

Introduction aux styles CSS (tutoriel)

Présentation de CSS.

Le signe CSS signifie Cascading Style Sheets, soit en français "Feuilles de styles en cascade". C'est un langage de mise en forme pour les pages web, mais aussi pour d'autres documents tels que les documents XML. CSS est parfaitement standardisé par le W3C, et est maintenant pris en charge pratiquement à 100% par tous les navigateurs.

CSS répond à plusieurs problématiques :

  • Il permet de séparer le contenu proprement dit de sa mise en forme.

    La nécessité de produire des pages web de plus en plus riches sur le plan esthétique risquait d'aboutir à l'absurdité qu'il y ait plus de code pour assurer la mise en page que pour décrire le contenu lui-même. Le volume des pages en serait d'autant augmenté.

    CSS permet d'enregistrer toutes les directives de mise en forme dans un fichier séparé, qui sera simplement associé aux pages de contenu.

  • CSS facilite l'homogénéisation des présentations d'un site web.

    Puisque la mise en forme est décrite dans un fichier séparé, il est facile d'associer ce même fichier à toutes les pages du site et ainsi, de leur donner à toutes la même présentation.

    Les modifications de mise en forme seront également beaucoup plus rapides à réaliser puisqu'il suffira de modifier un seul fichier, sans toucher aux nombreuses pages du site.

  • Simplification des programmes pour les sites dynamiques.

    La génération des pages dynamiquement (par un programme PHP, par ASP, ou autre) est beaucoup plus simple puisque seul le contenu a besoin d'être généré, sans qu'il soit nécessaire de s'occuper de sa mise en forme.

Les concepteurs de CSS ont souhaité un langage qui soit simple à mettre en œuvre : il suffit d'un bloc note ou de n'importe outil capable de saisir du texte pour créer une feuille de styles CSS. La syntaxe, bien que assez stricte, comme dans tout langage informatique, est facile à assimiler.

Avec le temps, et au fil des versions, CSS a gagné en puissance et permet maintenant des mises en forme très sophistiquées. Il apporte des solutions simples aux problématiques nouvelles :

  • Mise en forme responsives.

    La possibilité de concevoir des mises en forme qui s'adaptent à la taille de l'écran de l'internaute est devenue particulièrement nécessaire à cause des terminaux mobiles (téléphones, tablettes, voire montres).

  • Les polices safe font.

    La gestion des polices de caractères et leur téléchargement possible sur la machine de l'internaute garanti une restitution fidèle de la mise en page, même avec des polices fantaisies.

  • Animations.

    CSS permet de créer des animations afin de rendre les sites internet plus interactifs et plus ludiques.

  • Déformations géométriques.

    Des déformations géométriques telles que la rotation, peuvent être appliquées à une image, un titre, un menu, ou n'importe quel élément de la page.