Version du 2 décembre 2023 à 11:08

Décembre 2023 : rédaction en cours.

Cascading Style Sheets ou CSS ( « feuilles de style en cascade » ) est le nom de la technologie et d'une langage qui servent à

décrire la présentation d'un contenu.

Les deux mots en gras « décrire » et « présentation » doivent rester dans notre mémoire pendant le temps que nous nous occupons de CSS^[1]. La question « quel contenu ? » n'est cependant pas anodin, car le CSS s'applique

aux pages rédigées en HTML
aux images vectorielles en format SVG
... mais – en fait – à tout ce qui est XML, ce qui inclut déjà le SVG et une grande partie des pages HTML existantes.

Si, par contre, nous inversons la question et cherchons à « décrire la présentation de divers contenus en XML », nous devrons accepter qu'il y a une autre technologie qui produit les exactement mêmes résultats, mais qui est plus puissante et plus intéressante que le CSS en vue de la génération automatisée de « contenus » : XSL^[2]

( s'il vous plaît, ignorez XSLT pour maintenant ).( ... et merci )

Qu'est ce que ça fait

Referez vous à l'article HTML, si le code des langages de balises vous pose un problème. Une instruction en CSS cible toujours une ou plusieurs balises dans un code.

Nous allons voir comment est crée

une paragraphe comme celle-ci,
sur font gris-claire, avec une police sans serifs en cursif.

Trois exemples, qui produisent le même effet

CSS en ligne – intégré dans la balise <p/>

<html><head><title>Monolog Cyrano Deutsch</title></head><body>
<!-- ( code omis pour l'exemple ) -->
<!-- paragraphe en cursif sur font gris claire, police sans serifes -->
<p style="font-family:sans;font-style:italic;background-color:lightgray;">
<!-- s'applique au texte suivant -->
Wie soll ich’s halten künftig?<br/>
Mir einen mächtigen Patron entdecken<br/>
Und als gemeines Schlinggewächs dem Schaft,<br/>
An dem ich aufwärts will, die Rinde lecken?
Durch List empor mich ranken, nicht durch Kraft?<br/>
Nein. Vielen Dank! Oder soll ich, wie so viele,<br/>
Ein Loblied singen auf gefüllte Taschen,<br/>
Soll eines Hofmanns Lächeln mir erhaschen,<br/>
Indem ich seinen Narren spiele?<br/>
Nein. Vielen Dank!</p>
<!-- le code css n'a plus d'effet à partir d'ici -->
<!-- ( code omis pour l'exemple ) -->
</body></html>

CSS défini en haut d'une page, dans <head/>.

<html><head>
  <title>Monolog Cyrano Deutsch</title>

<!-- définitions de « styles » -->
  <style type="text/css">
<!-- style de toutes les paragraphes pour poèmes -->
     p.poème {
       font-family:sans;
       font-style:italic;
       background-color:lightgray;
     }
  </style>
</head><body>
<!-- ( code omis pour l'exemple ) -->
<!-- paragraphe en cursif sur font gris claire, police sans serifs -->
<p class="poème">
Wie soll ich’s halten künftig?<br/>
Mir einen mächtigen Patron entdecken<br/>
Und als gemeines Schlinggewächs dem Schaft,<br/>
<!-- ( code omis pour l'exemple ) -->
</p>
</body></html>

CSS externe, dans un fichier référencé dans <head/>

<html><head>
  <title>Monolog Cyrano Deutsch</title>

<!-- définitions de « styles » dans un fichier
     http://[serveur/site]/css/cyrano.css
     Son contenu est identique à la définition p.poème
     dans l'exemple précédent
-->
  <link rel="stylesheet" href="/css/cyrano.css">

</head><body>
<!-- ( code omis pour l'exemple ) -->
<!-- paragraphe en cursif sur font gris claire, police sans serifs -->
<p class="poème">
Wie soll ich’s halten künftig?<br/>
Mir einen mächtigen Patron entdecken<br/>
Und als gemeines Schlinggewächs dem Schaft,<br/>
<!-- ( code omis pour l'exemple ) -->
</p>
</body></html>

Les trois exemples ci-dessus montrent trois manières de définir – et deux manières d'appliquer les instructions en CSS. Il n'y a pas une qui est « mieux » que les autres; il est préférable de connaître leurs avantages et désavantages dans des contextes précises. Au bout du compte vous allez vous servir de chaque technique là, où ça vous paraîtra utile^[3].

Jouons

D'abord une révélation importante : Ce Wiki permet d'enrichir le contenu avec des instructions CSS ! Cette possibilité a ses limites, mais nous n'allons peut-être pas les explorer. Les manipulations exemplaires peuvent – par contre – être évaluées directement avec le formatage des passages dans cet article.
VLAN !! C'était le projectile qui devrait me rappeler que le Wiki n'est pas un terrain de jeux. Mais nous sommes adultes ... hm. 😎 ... n'est-ce pas ?! ( raté – d'ailleurs )

paragraphes ou bloques : couleurs, position, bordures

Prenons l'exemple d'en haut « CSS en ligne – intégré dans la balise <p/> » :

Wie soll ich’s halten künftig?
Mir einen mächtigen Patron entdecken
Und als gemeines Schlinggewächs dem Schaft,
An dem ich aufwärts will, die Rinde lecken?
Durch List empor mich ranken, nicht durch Kraft?
Nein. Vielen Dank! Oder soll ich, wie so viele,
Ein Loblied singen auf gefüllte Taschen,
Soll eines Hofmanns Lächeln mir erhaschen,
Indem ich seinen Narren spiele?
Nein. Vielen Dank!

... en cours de rédaction. 2/12/2023 (éffacez la page si ça dure encore des semaines)

Références

↑ La centrale pour les informations concernant CSS : https://www.w3.org/Style/CSS/Overview.fr.html
↑ XSL : Introduction en français chez IBM : https://www.ibm.com/docs/fr/i/7.5?topic=toolkit-xsl-introduction
↑ Trouvez des excellentes tutoriels sur mozilla.org : https://developer.mozilla.org/fr/docs/Learn/CSS/First_steps

[1] La centrale pour les informations concernant CSS : https://www.w3.org/Style/CSS/Overview.fr.html

[2] XSL : Introduction en français chez IBM : https://www.ibm.com/docs/fr/i/7.5?topic=toolkit-xsl-introduction

[3] Trouvez des excellentes tutoriels sur mozilla.org : https://developer.mozilla.org/fr/docs/Learn/CSS/First_steps

[1]

[2]

[3]

« Cascading Style Sheets » : différence entre les versions