Initiation aux feuilles de style (CSS)

Dreamweaver dispose d'une aide en ligne assez développée à propos des feuilles de styles (allez dans l'aide et cherchez «styles» dans l'index). Malheureusement, la rédaction de cette aide s'appuie sur une connaissance de base du HTML et de son jargon, connaissance minimale certes, mais peut-être encore hors de portée d'un débutant. Nous allons essayer de démarrer à un niveau plus élémentaire, mais nous renverrons ensuite le lecteur à l'aide de Dreamweaver pour le détail des multiples propriétés... à quelques remarques près, pour dissiper quelques obscurités nées d'une francisation incomplète ou discutable du logiciel.

Nous nous référerons à la version 2 ; les versions suivantes sont restées très voisines dans ce domaine des styles.

Dreamweaver permet de faire des feuilles de style externes et internes. On peut aussi introduire des styles locaux, mais uniquement à travers des classes préalablement définies dans les feuilles ; nous reviendrons sur ce point dans la suite.

En toute logique les feuilles externes sont plus importantes que toutes les autres formes de style et nous commencerons par là ; et comme nous sommes nous-même passé par quelques moments de perplexité en lisant l'aide en ligne, nous allons détailler le processus plus finement que ne fait cette aide.

Au moment de créer une feuille de style externe, vous devez avoir commencé la première page de votre site, du moins la première qui utilisera des styles externes. Il est inutile d'avoir achevé cette page, mais avoir entré quelques titres et paragraphes permettra de contrôler l'effet des styles.

1. Ouvrir la fenêtre des styles (menu Fenêtres>Styles)
2. Cliquez le bouton Editer
3. Une nouvelle boîte de dialogue «Editer feuille de style» s'ouvre.
   Cliquer sur le bouton Liens.
4. Une nouvelle boîte «Ajouter une feuille de style externe» s'ouvre.
   Dans la case Fichier/URL, entrez le nom de votre future feuille de style ; quelque chose comme monstyle.css (il faut que ça se termine par .css). En dessous, le bouton «Ajouter sous lien» doit rester coché. Cliquez sur OK
5. Vous êtes de retour dans la boîte «Editer feuille de style», mais avec maintenant une nouvelle écriture comme monsite.css (lien) dans le cadre en haut à gauche. Sélectionnez cette ligne puis cliquez sur le bouton Editez.
6. Une nouvelle boîte de dialogue s'ouvre, identique à la précédente, mais intitulée «monsite.css» (c.à.d. du nom de votre feuille externe). Cliquez cette fois sur le bouton Nouveau.
   Par exemple, pour mettre un fond jaune dans la page,
   (i) cliquez le bouton redéfinir balise HTML, choisissez «Body» dans le sélecteur et cliquez «OK».
   (ii) Une nouvelle boîte «Définition du style pour BODY» s'ouvre. Dans le cadre Catégories, cliquez sur Arrière-plan
   (iii) vous devez alors avoir un bouton Couleur d'arrière- plan sur la droite. Cliquez dessus, choisissez un jaune, puis cliquez sur le bouton général «OK» de la boîte.
7. Un nouvelle boîte de dialogue «Nouveau style» s'ouvre avec trois options :
   — Créer un style personnalisé (classe)
   — Redéfinir la balise HTML
   — Utilisez le sélecteur CSS
   Nous examinerons plus loin ces différentes options (nous commencerons par la deuxième, parce que le plus urgent pour la première feuille de style du site est précisément de redéfinir ces fameuses balises HTML) ; pour le moment faites un peu n'importe quoi, par exemple ce qui est détaillé ci-contre.
8. Une fois terminées les opérations avec cette nouvelle boîte, on nous ramène sur la boîte «monsite.css». On pourrait alors reprendre le bouton Nouveau pour définir d'autres règles de style, après quoi on nous ramènera à nouveau sur cette boîte «monsite.css». A chaque fois, le cadre de gauche donne une indication mnémonique des styles ainsi définis, sur lesquelles on pourra éventuellement revenir (par sélection de la ligne appropriée puis le bouton Editer). A la fin, on validera tout le travail effectué sur la feuille externe en cliquant sur le bouton Enregistrer.
9. On est alors de retour sur la boîte «Editer feuille de style» (en fait, cette boîte est un résumé de toutes les feuilles de style externes et internes s'appliquant à la page). Pour revenir sur notre feuille externe, il faudra sélectionner sa ligne monsite.css (lien), et cliquer, soit sur Nouveau pour ajouter de nouvelles instructions, ou sur Editer pour revenir sur les anciennes instructions ou en rajouter de nouvelles.
   On cliquera sur Terminé pour fermer cette boîte de dialogue et revenir à l'édition de la page HTML proprement dite.

Cette option se présente dans la boîte de dialogue «Nouveau style». Il faut alors choisir l'une de ces fameuses balises par le sélecteur en bas de la boîte, et le choix proposé va immanquablement laisser le néophyte perplexe :

Il s'agit de toutes les commandes du HTML classiques. Nous avons mis en gras les plus importantes, celles qu'il va falloir comprendre un peu pour avancer. Elles se répartissent en 5 groupes

• body commande l'ensemble de la page, et notamment le fond de la page (couleur ou image de fond). On peut aussi y définir la présentation générales des caractères dans la page (police, taille, couleur, etc...)
• p commande la présentation générale des paragraphes. En principe, on devrait hériter du style précédent pour le body en ce qui concerne les caractères, mais il vaut mieux tout répéter...
• td commande la présentation dans les cellules des tables. A nouveau, on devrait hériter du body pour les caractères, mais NN4 ne l'entend pas ainsi... Et donc, on répète.
• ul, ol et li commandent la présentation des listes à puce (ul), des listes numérotées (ol) et de chacun de leurs articles (li). A nouveau, l'héritage du body devrait être assumé, mais...
• h1, h2... h6 commandent la présentation des différents niveaux de titres obtenus par les menus Texte>Format>En-tête1, En-tête2, etc... . On peut très bien ne pas les redéfinir. Dans ce cas, le navigateur utilisera ses réglages par défaut pour choisir la taille et la graisse, à partir du type de caractère hérité du body. Mais on peut aussi préférer tout contrôler soi-même.
  Si on redéfinit ces balises h1, h2..., il est très important de conserver leur signification logique (h1 pour les titres les plus importants, h2 pour des titres de 2ème niveau, etc...). De cette manière, si la page est lue avec un navigateur qui ne comprend pas les styles, l'importance relative des différents titres et la structure logique de la page seront préservées.

Quelle que soit la balise choisie, on arrivera toujours à la même boîte dialogue «Définition du style pour [la balise] dans [le fichier externe]», boîte fort complexe avec 8 volets indépendants :

On ne remplira que les volets intéressants pour la balise concernée, sachant (un peu) à quoi sert cette balise et à quoi correspondent ces différents volets. Comme cette boîte reviendra pour n'importe quelle demande de création ou de modification de style, nous lui consacrerons un paragraphe spécial un peu plus loin. Pour le moment, vous pouvez faire un peu n'importe quoi et finalement enregistrer la feuille externe «monsite.css»

Dans la suite, nous dirons plus simplement «classe de style» ou, plus brièvement, «classe». De telles classes sont tout simplement une collection d'instructions de style (sur les polices, la taille, l'arrière-plan, les marges etc...) susceptibles de s'appliquer à un peu n'importe quoi dans la page. On leur attribue un nom, commençant obligatoirement par un point, comme .maclasse (DW2 rajoutera fort obligeamment ce point si vous l'oubliez, mais ne prenez pas de mauvaises habitudes :-).

Pour créer ces classes dans votre feuille externe, en repartant de la fenêtre «Styles» (menu Fenêtre>Styles) :

1. cliquez sur le bouton Editer.
2. La boîte «Editer feuille de style» s'ouvre. Sélectionnez la ligne du fichier externe, puis cliquez le bouton Nouveau.
3. La boîte «Nouveau style» s'ouvre. Choisissez l'option Créer un style personnalisé (classe) et mettez le nom de votre choix dans la case du bas. A titre d'exemple, nous allons prendre «.rouge», pour créer un arrière-plan rouge. Validez par OK.
4. Dans la boîte «Définition du style pour .rouge dans [fichier externe]», prenez le volet Arrière-plan, cherchez un rouge qui vous plaise sur la première ligne Couleur d'arrière-plan, puis validez par OK
5. De retour dans la boîte d'édition du fichier externe, cliquez sur Enregistrer
6. De retour dans la boîte «Editer feuille de style», cliquez sur Terminé

Dans la fenêtre des styles, vous devez maintenant avoir au moins deux lignes : (aucun) (ligne par défaut) et une nouvelle ligne rouge, qui correspond à notre nouvelle classe. Son emploi est très intuitif: sélectionnez n'importe quoi dans votre page, puis cliquez sur la ligne rouge dans la fenêtre des styles : le fond de la sélection passe au rouge (enfin, une fois désélectionnée...). Si vous changiez d'avis et que vous vouliez enlever ce style, refaites la sélection et cliquez sur (aucun) dans la fenêtre des styles.

Encore plus expéditif, faites une sélection, puis faites un clic-droit (ou CTRL-clic sur MacOS) ; il s'ouvre un menu contextuel dont la ligne Style personnalisé vous indique les classes parmi lesquelles choisir. Si vous ne faites pas de sélection au prélable, la classe va s'appliquer à tout le paragraphe situé sous la souris.

Pour créer des classes internes à la pages, qui ne serviront donc que pour cette page, on suivra les mêmes opérations, à ceci près qu'à l'étape (2), il ne faudra pas sélectionner la ligne du fichier externe avant de cliquer sur le bouton Nouveau. La nouvelle classe apparaîtra dans la fenêtre des styles de la même façon que les classes externes.

Nous n'allons pas détailler la multitude des options possibles dans ces huit volets. La plupart parlent d'elles-mêmes. Pour les autres, on pourra se reporter aux explications de l'aide en ligne. Lisez néammoins les explications ci-dessous et dans les pages qui suivent !

Type

Honte à celui qui a francisé le logiciel ! Le mot anglais «Type» aurait dû être remplacé par «caractères» (d'imprimerie).
Si vous êtes perplexes devant la multiplicité des options offertes pour définir la taille des caractères, lisez nos explications ! Et lisez-les aussi si vous ne ressentez aucune inquiétude, car il y a des pièges à éviter, non documentés dans l'aide en ligne :).

Bloc

Il faut comprendre «bloc de texte». C'est là qu'on décidera notamment de la justification et du retrait en tête des paragraphes (alinéas).

Arrière-plan

Ce volet ne sert qu'à fixer la couleur des fonds ou les images d'arrière plan. Il s'applique évidemment l'ensemble de la page (balise HTML body), mais aussi à n'importe quel bloc. Comme on verra plus tard que tout est bloc dans une page HTML, on peut l'appliquer à n'importe quoi... avec précaution (:-))

Boîte

Ce volet sert précisément à définir les propriétés «géométriques» des blocs : largeur, hauteur, insertion flottante ou non, marges externes ou internes. Tout cela devrait s'éclaircir après notre page sur les blocs dans une page HTML.

Positionnement

Ce volet s'applique essentiellement aux calques, c.à.d. une variété particulière et très importante de ces blocs, dont nous expliquons plus loin la nature.

Bordure

Ce volet est un complément des deux volets précédents sur les blocs. Il ne sert qu'à définir les paramètres d'une bordure éventuelle autour de ces fameux blocs.

Liste

Ce volet s'applique évidemment au rendu des listes à puce ou listes numérotées. Mais il ne couvre pas des paramètres importants comme les retraits sur la gauche ou l'espacement entre les différents éléments d'une liste, pour lesquels il faudra jouer sur les marges internes ou externes pour les balise HTML ul, ol et li (ou dl, dd et dt pour les listes en pur texte)

Extensions

Bof... ça ne devrait pas souvent servir.

C'est le troisième choix possible dans la boîte «Nouveau style». Nous n'avons trouvé aucune explication à son sujet dans l'aide en ligne, mais ce n'est pas trop compliqué à comprendre. Et, en fait, il est même très important de s'en servir !

Cela va avoir notamment deux grandes applications :

1. définir le style général des liens sous leurs quatre parfums possibles. Pour cela, allez au sélecteur en bas de la fenêtre ; vous y trouvez 4 noms prédéfinis :
   a:link : liens non visités
   a:visited : liens visités
   a:hoover : liens survolés par la souris
   a:active : lien en cours de clic, c.à.d. quand vous avez enfoncé le bouton sans le relâcher.
   
   Si vous prenez l'un de ces quatre choix, vous arrivez devant la fenêtre de définition du style et ses 8 volets. Vous pouvez alors spécifier la police, la couleur, la graisse, etc... Ce style pourra être inclus dans votre feuille externe (pour tout le site) ou bien dans les styles internes spécifiques à la page. Attention toutefois aux conflits entre styles externes et internes, le gagnant dépend du navigateur !
    
2. donner un style spécifique aux calques. Ceux-ci ont un nom (que l'on voit à gauche de l'inspecteur de propriété une fois le calque sélectionné ; par défaut, Dreamweaver les appelle Layer1, Layer2,etc... mais vous pouvez changer ce nom comme vous le voulez dans l'inspecteur). Pour donner un style particulier à un calque, entrez le nom de ce calque précédé de # dans la case de texte de la boîte «Nouveau Style» (par exemple #Layer1 pour la calque Layer1), puis cliquez sur OK et cochez les options de votre choix. Attention toutefois au volet «Positionnement» où certaines options risquent d'être en conflit avec le statut de calque tel que le comprend DW2.

Bien qu'on puisse accéder à de très nombreuses options, il y a beaucoup de propriétés de style auxquelles Dreamweaver ne donne pas accès si on refuse de rentrer dans le code.

Tout d'abord, à en croire sa documentation, qu'il s'agisse du vieux DW2 ou de la dernière version DW4 de ce début 2002, il se limite aux recommandations CSS1 du consortium W3C. Ce n'est pas vraiment exact. D'un côté, il ne donne pas accès à toutes les propriétés prévues dans le document CSS1 : par exemple, il ignore complètement la propriété display qui a pourtant des applications très intéressantes. Concernant l'architecture de la page, il ne donne pas accès à des blocs DIV qui ne soient pas des calques. Par exemple, le petit jeu ci-dessous

qui ne demande qu'une seule classe de style sur des blocs DIV emboîtés n'est pas réalisable sans intervention dans le code. Il y a donc des effets de rendu qui ne seront pas à la portée du profane, et des effets pas forcément aussi acrobatiques que l'amusette ci-dessus.

D'un autre côté, DW2 avait anticipé sur plusieurs des propriétés CSS2, quelques unes absolument fondamentales (visibilité et empilement des calques), et d'autres beaucoup plus anecdotiques (forme du curseur). Mais même avec DW4, on ne peut toujours pas accéder directement à d'autres propriétés très intéressantes, comme les pseudo-classes (lien, first-letter, etc...) que nous verrons plus loin.