Exemple 6     <<      >>      book     

Les effets visuels et le formatage sont accomplis à l'aide du CSS.

  XUL  HOME     

  xul1.xul  
Aspect par défaut.
<?xml-stylesheet href="css1.css" type="text/css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
align="vertical" >
     <menubar>
          <menu value="AAA">
               <menupopup>
                    <menuitem value="aaa"/>
                    <menuitem value="bbb"/>
               </menupopup>
          </menu>
          <menu value="BBB">
               <menupopup>
                    <menuitem value="111"/>
                    <menuitem value="222"/>
               </menupopup>
          </menu>
     </menubar>
</window>

  xul2.xul  
Quelques changement effectué dans les fichiers CSS.
<?xml-stylesheet href="css2.css" type="text/css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
align="vertical" >
     <menubar>
          <menu value="AAA">
               <menupopup>
                    <menuitem value="aaa"/>
                    <menuitem value="bbb"/>
               </menupopup>
          </menu>
          <menu value="BBB">
               <menupopup>
                    <menuitem value="111"/>
                    <menuitem value="222"/>
               </menupopup>
          </menu>
     </menubar>
</window>

  CSS  HOME     

  css1.css  
La feuille de style par défaut de Mozilla est utilisée.
@import url(chrome://global/skin);

  css2.css  
De petits changement peuvent avoir un grand impact.
@import url(chrome://global/skin);
menubar {background-color:navy; font-weight:900}
menu:hover {background-color:white; font-weight:bold; font-style:italic}
menu:active {background-color:aqua; font-weight:bold; font-style:italic}
menu {color:white;margin-left:5em}
menuitem{background-color:red; color:yellow; font-size:200%;}
menupopup {border: double purple; border-width:1em;}