Qu’est-ce que le CSS ?

CSS est l’acronyme de Cascading Style Sheets, qui signifie feuilles de style en cascade en français. C’est un des principaux langages utilisés dans le web, les autres étant HTML, Javascript et PHP. Tout comme HTML, CSS est un langage descriptif, et non un langage de programmation. On n’y trouve ni fonction mathématique, ni programme. Il est utilisé pour donner une forme, un style, à une page web écrite en HTML de manière précise. CSS inclut l’idée de « cascade » : un élément HTML peut hériter de plusieurs styles de différentes sources selon un degré d’importance. Pouvoir séparer le HTML et le CSS offrent de nombreux avantages, comme l’uniformisation de la présentation du document selon le média ou la taille de l’écran (un site web pour être vu différemment entre un écran d’ordinateur et un smartphone) et la gestion facile et rapide de son design (changer la taille du texte de toute une page ne prend que quelques secondes).

À quoi sert le CSS ?

Le CSS permet de donner une forme à une structure écrite en HTML. Sans CSS, une page web en HTML ne serait qu’une succession de mots, listes et tableaux les uns après les autres. Le CSS apporte une esthétique à une page web. Il définit par exemple :

  • la police d’un texte et son aspect ;
  • les marges et le rembourrage entourant un élément ;
  • l’apparence du menu ;
  • l’ajout de bordure et autres éléments géométriques ;
  • l’agencement de grilles d’images ;
  • des effets ou animations simples ;
  • l’allure d’un site selon l’appareil utilisé par l’utilisateur ;
  • la navigation web.

La structure du CSS

Sa structure est simple. Elle comprend 3 éléments : un sélecteur, qui détermine le type d’élément auquel on va appliquer un style (les paragraphes ou les titres par exemple), une propriété à changer (la couleur, la taille d’un texte, etc) suivie de 2 points et la valeur de cette propriété. Chaque propriété est séparée d’un point-virgule. Les propriétés et leurs valeurs sont encadrées par des accolades. Exemple, pour mettre un paragraphe en rouge, d’une taille de 16 pixels, on écrira : p {font-size : 16px; color : red;}. Comme tous les langages informatiques, le CSS s’écrit en anglais.

Comment CSS interagit avec HTML ?

Le HTML forme la structure d’une page web, son ossature. Il se compose de paragraphes, titres, listes, images et tableaux. Tous ces éléments se suivent les uns après les autres ou bien sont imbriqués les uns dans les autres. Le CSS sert alors à apporter une organisation esthétique au HTML. Chaque élément HTML est contenu dans un conteneur d’une certaine taille, d’une certaine couleur, entouré d’une marge intérieur (padding), d’une bordure et d’une marge extérieure (margin). Ces conteneurs sont imbriqués les uns dans les autres. Le principal conteneur, -body- contient tous les éléments visibles d’une page web. En jouant sur ces éléments, on organise visuellement les différents conteneurs les uns par rapport aux autres et donc le document. Il ne s’agit toutefois que de la base du CSS, les fonctions qu’il apporte étant beaucoup plus complexes.

L’intégration du CSS dans un site web

Le CSS peut être intégré de trois différentes façons : dans une feuille de style externe au document HTML (la méthode recommandée), dans la balise -head- du document ou directement dans chaque élément du document.

Le CSS inline

Pour placer des déclarations CSS dans la balise HTML d’un élément, on utilise l’attribut style. En procédant ainsi, le CSS n’est appliqué qu’aux éléments concernés. Cela permet par exemple d’attribuer un cadre coloré autour d’un paragraphe en particulier et non de tous les paragraphes. On utilise alors le CSS inline (dans la ligne) pour des changements particuliers, mais jamais pour attribuer un style global. Exemple : -h1 style= »color:green; font-size:16px; »-Titre-/h1-

Le CSS appliqué en interne

Implémenter du CSS dans chaque balise HTML d’une page web se révèlerait beaucoup trop long à taper. On peut alors réunir le CSS dans une balise -style- à l’intérieur de la balise -head- qui se situe au début de tout document HTML. Exemple : -style type= »text/css »-h1 {color:green; font-size : 16px;}-/style-. Ici, toutes les balises H1 de la page seront affectées par le style appliqué.

La feuille de style externe

L’aspect d’un site internet ne variant pas d’une page à une autre, appliquer le même code dans chaque page web serait fastidieux et inutile. Une feuille de style .css externe au document HTML est la meilleure façon d’appliquer du CSS à un site web. Cette feuille de style peut contenir l’intégralité du CSS d’un site, ce qui représente souvent des centaines de lignes de code. Il est alors plus facile d’effectuer des changements sans faire d’erreur. Elle se présente sous la forme : Sélecteur {propriété: valeur;}Sélecteur {propriété: valeur; propriété: valeur; propriété: valeur;}Sélecteur {propriété: valeur; propriété: valeur;}En reprenant notre exemple précédent, cela donne :H1 {color:green; font-size : 16px;}