Études supérieures - Les enseignements - Plateforme Temps Réel - Atelier Hypermédia - HTML / CSS -

web#07 { CSS : introduction ; }

Il y a beaucoup de termes infectes sur Internet. Des sigles étranges, des mots-composés, c’est vraiment des histoires d’informaticiens : xDSL, TCP/IP, HTmL, PHP, mySQL, FreeBSD, UNIX, PPP, WAI, URL, ... C’est étonnant que nous soyons arrivés jusqu’ici avec tous ces termes illisibles. En plus, quand nous regardons à quoi représentent ces termes, c’est encore pire : Dynamic Subscriber Line. Quoi ? Une line d’abonnement dynamique ? Transmission Control Protocol, Hypertext markup Language, Personal Home Pages (ou encore mieux : PHP Hypertext Processor), my (ne demandez pas) Structured Query Language, etc. Trop de termes, les uns les plus compliqués que les autres.

Voici maintenant une enième terminologie impossible que je vais vous demander de mémoriser : CSS, c’est-à-dire Cascading Style Sheets, c’est-à-dire Feuilles de style en cascade, ou ce que nous avons appelé jusqu’ici les Feuilles de styles graphiques.

Ce qui se cache derrière ce terme est finalement assez facile : on va décrire comment notre page web doit être présenté. On va décrire le type de police de caractères dans notre page, les couleurs de texte ou de fond de la page, la façon dont les listes ou autres balises doivent être présentées sur la page. C’est la revange des graphistes sur toutes ces années où Internet rimait avec mauvais goût.

Bien sûr, je pourrais vous expliquer pourquoi on parle de feuilles de styles et non pas simplement des règles de présentation. Je pourrais aussi vous expliquer maintenant (avant de montrer des exemples) pourquoi on a ajouté un terme pour confondre encore plus les débutats : feuilles des styles en cascade. Je pourrais même essayer de vous expliquer qu’en cascade veut dire la même chose que les poupées russes. mais vous ne voulez pas savoir tout cela. Vous voulez faire des pages jolies. Alors, du coup, regardons comment marche le CSS, même si nous ne savons pas ce que cela veut dire.

Le fichier CSS

La première chose que nous ferons ce sera de créer notre fichier CSS. Ce fichier CSS ira dans le même dossier que notre fichier HTmL :

Ensuite, notez que dans notre fichier HTmL, nous avons indiqué au navigateur que le fichier « style.css » sera notre feuille de style graphique avec la formule suivante :


 <style type="text/css">
   @import url(style.css) screen;
 </style>

Cette information indique au navigateur qu’il existe une feuille de style <style> et que cette feuille de style est au format « css ». Ensuite, avec la commande @import, le navigateur importera le fichier « style.css » et se servira de lui pour modifier l’affichage de la page sur l’écran (« screen »).

On peut même importer plusieurs feuilles de style CSS, pour différents usages de notre page : téléphone mobile (« handheld »), l’écran (« screen »), l’impression (« print »).

 <style type="text/css">
   @import url(style.css) screen;
   @import url(print.css) print;
 </style>

On peut aussi indiquer que notre feuille de style graphique s’appliquera sur tous les usages qu’on fera de notre page :

 <style type="text/css">
   @import url(style.css) all;
 </style>

Si ce code vous pose problème, il y a aussi une autre formule qui fonctionne très bien :

<style type="text/css" media="all">
   @import url(style.css);
</style>

modificateurs

Dans l’exemple en haut nous avons indiqué l’instruction suivante dans notre feuille de style CSS :

h1 { color: red; }

Cette instruction donnera le résultat suivant dans le navigateur :

Notez que le titre (<h1>) est devenu rouge, mais que tout le reste à rester comme avant, c’est-à-dire selon l’apparence par défaut.

Ce qui veut dire que le CSS vous permettra de modifier l’apparence par défaut des balises HTmL, et leur donner des apparences plus agréables, voire plus lisibiles. C’est pour cette raison que nous avons séparé la couche sémantique de la couche présentation : nous pouvons, de toute façon, changer l’apparence de toutes les balises via des instructions dans le fichier CSS.

Les instructions CSS seront donc des modificateurs des règles de présentation des balises HTmL. Sa structure de modification est la suivate :

nomdelabalise {
   aspectàchanger : nouvelleapparence ;
   autreaspectàchanger : nouvelleapparence ;
}

Il faut indiquer donc le nom de la balise à changer. Ensuite il faut indiquer quel aspect de cette balise on veut changer : est-ce que nous allons changer la couleur du texte ? son alignement ? son emplacement ? Toutes ces aspects seront indiqué à l’intérieur des accolades.

Si vous êtes sur macintosh, il suffit d’appuyer sur la touche alt puis les parenthèses classiques pour avoir des accolades.

Sélecteurs

Dans la terminologie CSS, un sélecteur (« Selector » en anglais) est une chose dont il faut changer l’apparence. C’est juste une autre terme pour dire la balise qu’on veut changer. Si nous ne contentons des balises que nous avons appris jusqu’ici, les selecteurs CSS serait :

- body
- p
- em
- strong
- img
- ul
- ol
- li
- dl
- dt
- dd

Pour les liens le sélecteur est un peu plus bizzare, car il y a quatre comportements à définir dans un lien :

- a:link
- a:visited
- a:hover
- a:active

Car il se peut que nous ayons envie d’apparences différentes pour nos liens, par exemple quand on est dessus avec la souris (a:hover), quand on cliqué sur le lien (a:active), ou dans les deux possibilité statiques du lien : jamais visité (a:link), ou déjà visité (a:visited).

Voici un exemple très simple d’usage des différents sélecteurs CSS. Nous allons définir la couleur du texte du paragraphe, celle du titre h1 et la couleur de fond de la page :


body {
        background-color: yellow;
}

p {
        color: blue;
}

h1 {
        color: red;
}

On constate que le fond est jaune, le texte du paragraphe est blue, et le texte du titre h1 est rouge.

Cascade = poupées russes

Pourquoi le fond du paragraphe est jaune, alors que nous avons seulement demandé au corps du texte d’être jaune sur son fond ?

Le CSS s’appelle Cascading Style Sheets en anglais, c’est-à-dire des règles graphiques en cascade. En gros, on peut expliquer cela en disant qu’une balise qui se trouve dans une autre balise, hérite de ses propriété graphiques, elle hérite de son style CSS. Si je dis que le corps du document sera avec un fond, tous les sous-documents hériteront de cette apparence graphique.

Il y a des exceptions à ce règle, surtout quand l’élement à l’intérieur du corps déclare une apparence autre, comme dans l’exemple suivant :


body {
        background-color: yellow;
}

p {
        background-color: black;
        color: white;
}

h1 {
        color: red;
}

Comparez cette illustration avec la précente illustration : le fond du paragraphe a pris le dessus sur le fond du corps. Il y a un système très complexe qui permet de regler ce genre de conflits — nous ne l’expliqueront pas dans ce cours. Il suffit de savoir pour l’instant qu’en règle générale, le même attribut d’une poupée plus petite et d’une plus grande, donnera raison à l’attribut de la poupée plus petite. Si une balise (<p>) se trouve à l’intérieur d’une autre (<body>), et que les deux balises demandent le même attribut (ici background), c’est celle qui est plus spécifique qui gagne. C’est ce qu’on appelle en terminologie CSS, la cascade.

Attributs

Nous avons déjà vu que les mêmes balises des cours précédents marcheront pour la description graphique CSS. Quels sont donc les attributs que nous pouvons changer à l’intérieur des accolades ?

Dans le cours suivants nous explorerons plus ces attributs. mais voici quelques-uns que vous pouvez déjà expérimenter chez vous si vous envie de bidouiller avec le CSS et voir ce qu’il donne.

Commençons avec quelques exemples concernant les liens (ce que beaucoup demandent en premier — « comment enlever le trait !?! ») :


a:link {
 text-decoration: none;
}

a:visited {
 text-decoration: line-through;
}

a:hover {
 text-decoration: overline underline;
}

a:active {
 text-decoration: underline;
}

Ensuite, pour mettre une image décorative sur le fond de la page :

body {
 background-image : url(trees.jpg);
 background-repeat : repeat-y;
}

Dans cet exemple, background-repeat peut avoir des valeurs suivantes : no-repeat, repeat-x, repeat-y, sinon une combinaison, comme dans l’exemple. Si on indique aucun repeat, par défaut il répetera dans les deux sens.

Acheter une référence papier

Comme on vient de voir, il y a souvent plusieurs attributs pour modifier un endroit de la page. Pour définir le fond de l’écran, par exemple, il existe les attributs suivants :

- background-attachment
- background-color
- background-image
- background-position
- background-repeat

Il existe également une version qui les réunit tous : background. Avec beaucoup d’expérience, il se peut qu’on arrive à mémoriser tous les attributs du CSS. Ce qui est moins certain, c’est qu’on mémoriserait tous les mots-clés utilisés par tous les attributs. Par exemple, voici un usage des attributs concernant le fond de la page :

body {
   background-attachment: fixed;
   background-color: black;
   background-image: url(george.jpg);
   background-position: 50px 50px;
   background-repeat: no-repeat;
}

C’est un possibilité. Il donne un fond fixe (ne se défilera pas avec le texte), de fond noir, avec une image qui apparaît une fois sur le fond à partir du point 50 pixels du gauche et 50 pixels du haut de la page. Comme j’ai dit, c’est une possibilité. mais on aurait pu également écrire :

body {
   background-attachment: scroll;
   background-color: rgb(255,0,255);
   background-image: url(motif.jpg);
   background-position: left;
   background-repeat: repeat-y;
}

Comme on voit ici, il y a différents mots-clés possibles pour chacun des attributs. Alors, comment les mémoriser ?

Vous avez peut-être votre propre solution, mais la mienne est très simple et ne coute pas trop cher. En réalité, je ne mémorise pas tous les attributs CSS : je garde avec un moi un petit livre appelé CSS : Pocket Reference ou CSS : Concis et précis dans la traduction française. Il s’agit réellement d’un livre qui se glisse dans la poche (il est tout petit) et contient tous les mots-clés de CSS. En plus il coûte un peu moins que 10 euros. C’est peut-être trop cher pour un étudiant, mais je ne pense pas :

Ce livre ne vous éxpliquera pas comment fonctionne le CSS (il y a ce cours, puis on peut me poser des questions par email ou dans l’atelier). Par contre, il nous donnera une référence simple (une liste, si vous voulez) des termes nécessaires pour faire du CSS. Il ne s’agit pas d’une lecture de dimanche. Il s’agit d’une référence. En plus, son auteur (Eric meyer) fait partie du commitée de pilotage elle-même de la norme CSS. Il sait de quoi il parle.

Personellement je préfère avoir des références papier à côté de moi quand je travaille. mais si vous ne voulez pas faire couper des arbres, ou que vous n’avez pas 10 euros à dépenser, vous avez aussi de nombreux références sur le web. Peut-être le meilleur départ serait le plus proche de nous : les cours en-ligne de Josué Rauscher dans la rubrique de l’Atelier Edition Numérique.

class & id

Toutes les balises peuvent donc être redéfinies graphiquement par le CSS en utilisant des attributs appropriés. Cela nous permet de reformater l’ensemble de nos documents avec énormément de souplesse. Par contre, il y aurait un risque de monotonie si toutes les balises avaient exactemment la même apparence. Il pourait y avoir des cas où nous voudrions moduler un peu, voire beaucoup, l’apparence entre un élement et son voisin. Comment faire alors si vous voulez qu’un paragraphe d’un genre ait une apparence différent d’un paragraphe d’un autre genre ? Ou sinon comment faire si vous voulez que tous les paragraphes se ressemblent, à l’exception d’un paragraphe en particulier, par exemple le premier, ou le dernier ?

Pas d’inquiétude, le CSS peut très bien s’en charger. Pour ces deux besoins, nous avons deux mots très importants : class et id. Ces mots permettent d’identifier des genres des balises (class), sinon d’identifier des balises uniques (id). Ceci est le paragraphe d’introduction (id=« introduction »), celui-ci la conclusion (id=« conclusion »), et toutes les autres sont du genre argument (class=« argument »). Une fois ces balises identifiées ou classifiées nous pouvons les modifier dans le CSS : on peut donner une apparence quelconque à toutes les balises de type <p>, par exemple, mais donner une apparence légèrement modifié à partir de cette base à un des paragraphes en particulier.

De ce fait, nous avons non seulement isolé les élements pour mieux les présenter visuellement, nous avons également donné des informations sémantiques supplémentaires qui pourraient être parfaitement pratiques pour d’autres usages (par exemple un programme Processing qui viendrait récupérer tous les liens avec tel ou tel class. Nous n’avons donc pas triché, en ajoutant, par exemple, des élements graphiques dans la couche sémantique. Nous avons simplement rajouté des informations sémantiques supplémentaires qui peuvent également être pratique pour mieux représenter la page.

Les class identifient donc des genres de balises et peuvent être uniques ou nombreux sur la page, alors que les id sont toujours uniques et ne peut pas avoir d’autres id du même nom sur la page.

Voici un exemple pour illustrer leur usage. D’abord le fichier HTmL :


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTmL 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>class & id</title>
  <style type="text/css">
        @import url(css/style.css);
  </style>
</head>

<body>

  <ul>
        <li class="bons">les gendarmes</li>
        <li class="bons">les gens simples</li>
        <li id="nicolas">Nicolas Sarkozy</li>
        <li class="mechants">les racailles</li>
        <li class="mechants">Libération</li>
  <ul>

</body>

</html>

Et puis le fichier CSS :


body {
        background-color: black;
}

.bons {
        color: blue;
}

#nicolas {
        color: white;
}

.mechants {
        color: red;
}

Voici le résultat :

Notez que dans le fichier HTmL nous écrivons class="mot clé" et id="mot clé" pareil, alors que du côté CSS, class est identifié par un point (.) alors que id est identifié par le symbole dièse (#).

Défaut

Vers la fin des années 1990, on aurait bien aimé pouvoir mieux controller la présentation sur le World Wide Web. La confusion était devenu telle, que du coup on s’est remis à apprécier les premières pages web, ceux de 1993 et 1994, et leur sobriété graphique : du texte, des liens, quelques images. Dans un désir de rendre plus beau le web, les graphistes ont fini par le pourir.

Il y a eu un beau texte, particulièrement approprié qui est apparu suite à ce bordel, le texte Esthetique par defaut par Etienne Cliquet, un des manifestes du collectif Téléférique qui résistaient avec élégance à la surfacturation du design des sites web :

« A la limite du reconnaissable, l’esthétique par défaut peut parfois désarmer l’utilisateur par sa simplicité voir être interprétée comme une erreur (défaut) et son contenu ignoré. L’esthétique par défaut est née sur Internet de la relation entre humains et machines. [...] L’esthétique par défaut s’applique moins à une oeuvre ou un auteur, qu’à un choix collectif, un contexte de travail et de diffusion sur le réseau. Notre interface est absente de design. Elle n’a pas été conçue par un designer ou tout autre humain mais par le programme de la machine (serveur). » Par défaut « en informatique signifie une valeur définie dès le début de l’exécution du programme, avant que l’utilisateur ne la modifie. Au démarrage, l’affichage est initialisé par défaut. Son apparence est définit par le programme, le logiciel qui permet de voir le site. » Défaut « vient du vieux français défaute, défaillir c’est à dire » faillir dans « , » manquer à « . Est beau ou réussi ce qui manquerait à certaines règles ou croyances, une beauté par contumace. » - Etienne Cliquet

Bien que notre objectif soit autre, il y a ici un certaine nombre de choses sur lesquelles nous devrions réfléchir. Et puis, sur un plan plus technologique, il y a une bonne forumulation du travail du navigateur : s’il ne reçoit pas d’autres instructions, le navigateur présentera les styles choisis par défaut. C’est-à-dire que la page comencera avec les styles par défaut (page blanche, texte noir, liens bleus, liens déjà visités violets, etc), et ce sera à partir de ce canevas déjà choisit qu’il faudra faire des modifications.

Résumé

Nous venons de voir comment ajouter une feuille de style graphique (un fichier CSS) à notre page web. Cette feuille de style décrit donc des règles de présentation des balises qui se trouvent dans le fichier HTmL. Pour chaque balise nous pouvons mettre une règle de présentation. Si la balise n’a pas de règles CSS, où qu’un attribut spécifique d’une balise n’est pas défini (comme le background-color, par exemple), la présentation de la balise héritera de la balise qui l’entoure, sinon elle héritera de la présentation par défaut du navigateur.

Dans les cours suivants nous introduiront d’autres attributs CSS pratiques, comme ceux pour les polices. Nous parlerons également des système d’alignement et de positionement des élements sur la page web.

Liens

Pour plus d’informations sur le CSS et ses possibilités, voici quelques liens qui pourrait également vous donner des idées, voire des recettes. Les deux premiers sont justemment les deux sites qui ont réveillé le monde du design graphique — oui, le CSS marche, oui on peut en faire des choses intéressantes avec :

- http://placenamehere.com/neuralustm...
- http://www.csszengarden.com/
- http://www.alistapart.com/
- http://www.bluerobot.com/web/layouts/







ESAAix - École supérieure d’art d’Aix-en-Provence - http://www.ecole-art-aix.fr