1. La notion de style dans l'éditeur WYSIWYG

L'éditeur WYSIWYG utilise 2 groupes de styles : les styles globaux et les styles locaux. Les styles dit globaux sont des classes CSS appliquées à une balise DIV (non visible à l'édition du code HTML) englobant la totalité du contenu. Les styles dit locaux sont des classes CSS, héritant du style global en cours, appliquées à des balises SPAN (visibles à l'édition du code HTML) englobant des portions de texte (ou de code HTML). Des styles locaux sont définis pour chaque style global.

2. Liens entre wysiwyg.css et la barre de CSS de l'éditeur WYSIWYG

La barre d'outils CSS de l'éditeur WYSIWYG est générée automatiquement depuis le fichier css/wysiwyg.css ; On retrouve donc la notion de styles globaux et locaux dans ce fichier et son écriture.

	wysiwyg.css correspondant :
	`.global1 .local1 { foobar: auto ; } .global1 .local2 { foobar: foo ; } .global2 .local1 { foobar: bar ; } .global2 .local2 { foobar: none ; }`

Les styles définis dans le fichier wysiwyg.css ont, dans le cas général, cette syntaxe que le processus de création de la barre d'outils reconnait. Le processus de parsing du CSS cherche un 1er nom de classe pour créer un style global (s'il n'existe pas déjà) puis un éventuel style local à y associer. A noter que les noms des styles correspondent aux noms des classes.

Ce processus est capable de lire toutes les syntaxes admises en CSS.
Exemple :
.global1 .local1, .global1 TAGNAME, .global1 .local2 { foobar: auto ; }Ici, le style global global1 est créé avec les deux styles locaux associés local1 et local2.

Attention ! On peut induire en erreur inintentionnellement le processus de parsing avec du CSS mal formé ou dans les commentaires.
Exemple : Si vous voulez mettre une classe en commentaire n'écrivez pas
/* .global1 .localN { foobar: auto ; } */Dans le cas ci-dessus, le style local localN serait créé pour le style global global1 alors qu'il n'est pas réellement défini.
Ecrivez plutôt
/* .global1 .localN { foobar: auto ; } */Dans un cas extrème ceci peut servir d'astuce pour déclarer des styles locaux n'ayant un rendu qu'à l'intérieur de certaines balises.
Exemple:
/* Style n'ayant un effet que dans des cellules de tableau Déclaration pour le parser de la barre CSS : .global1 .particularCell Réelle déclaration : */ .global1 TD .particularCell { font: bold larger FooBar, foo ; }

3. Conseils pour bien profiter du CSS dans l'éditeur WYSIWYG

3.1 Utiliser le HTML et éviter les styles locaux

Le CSS permettant de redefinir le rendu graphique des balises HTML, on peut définir des styles globaux en se passant de styles locaux. Cette pratique est recommandée car elle simplifie l'utilisation de la barre de style et profite de la sémantique des balises.
Exemple :

.global1 H1 { font: Garamond, serif ; color: Darkolivegreen ; }

.global1 CODE { /* le bouton [C;] */
font: monospace ;
white-space: nowrap ;
}
/* Les listes */
.global1 UL { list-stype: url(../images/custom/bullet.gif) ; } /* Chemin relatif partant du dossier parent de wysiwyg.css */
.global1 OL { list-style: upper-roman ; }
.global1 OL OL { list-style: lower-roman ; }

Ce principe fonctionne bien sûr avec les tableaux.
Exemple :

<TABLE cols=3>
<THEAD>
<TR><TD>Item</TD><TD>Width</TD><TD>Height</TD></TR>
</THEAD>
<TFOOT>
<TR><TD colSpan=3>&copy;OfficeLaboratory</TD></TR>
</TFOOT>
<TBODY>
<TR><TH scope=rows>A16</TH><TD>8</TD><TD>2</TD></TR>
<TR><TH scope=rows>A34</TH><TD>17</TD><TD>2</TD></TR>
<TR><TH scope=rows>B17</TH><TD>17</TD><TD>1</TD></TR>
</TBODY>
</TABLE>

/* Global 1 */
.global1, .global1 TABLE { font: 10pt sans-serif ; color: #000 ; }
.global1 TABLE { border: 0px none ; border-collapse: collapse ; background: #FFF ; }
.global1 THEAD TD { border: 2px solid #777 ; color: #FFF ; background: #000 ; text-align: center ; font: bold larger serif ; }
.global1 TH { border: 2px solid #000 ; text-align: center ; vertical-align: middle ; padding: 6px 12px ; font-weight: bold ; }
.global1 TD { border: 1px solid #000 ; text-align: right ; vertical-align: middle ; padding: 3px 6px ; }
.global1 TFOOT TD { border: 1px solid #777 ; color: #777 ; text-align: right ; font: italic smaller serif ; }
/* Global 2 */
.global2, .global2 TABLE { font: 10pt/12pt Garamond ; color: Midnightblue ; }
.global2 TABLE { border: 1px solid Midnightblue ; background: Aliceblue ; font: 10pt Verdana, sans-serif }
.global2 THEAD TD { border: 1px solid Darkslateblue ; color: Mediumblue ; background: Lightblue ; text-align: center ; font-weight: bold ; font-size: larger ; }
.global2 TH { border: 1px solid Darkblue ; text-align: center ; vertical-align: middle ; padding: 6px 12px ; font-weight: bold ; }
.global2 TD { border: 1px solid Darkblue ; text-align: right ; vertical-align: middle ; padding: 3px 6px ; font: Arial, sans-serif ; }
.global2 TFOOT TD { border: 1px solid Royalblue ; color: Steelblue ; background: Powderblue ; text-align: right ; font-size: smaller ; }

3.2 Cascading et sélecteurs

Gardez à l'esprit les notions de cascade et de valeur des sélecteurs.
Exemple avec le cas interressant des listes :
.global1 UL { list-stype: disc url(../images/custom/bullet.gif) ; } .global1 .checklist LI { list-style: square url(images/custom/bullets/checkmark.gif ; }SPAN etant une balise "en ligne" (inline), elle se place (d'elle même en mode WYSIWYG) à l'intérieur des balises "bloc" (block) telle que UL. D'où cette écriture pour le sélecteur.

Attention ! On hérite parfois malgré soi, de styles provenants du portail lui même et écrasant les styles définis dans le fichiers wysiwyg.css. Au moment de la rédaction du fichier wysiwyg.css, n'oubliez donc pas de tester les rendus dans le portail sans se contenter de ceux dans l'éditeur. Utilisez l'instruction CSS1 ! important dans les cas récalcitrants.
Notez aussi que les differents navigateurs n'ont pas tous la même manière de rendre le CSS.

3.3 Harmoniser les styles globaux