CSS, as you know, will change the appearance of any given element on screen.  XBL is a method of changing the behavior of any given element.  You could use a binding to add specific elements that were rendered automatically when your binding element was described in the XUL file.  XBL is used in conjunction with both XUL and CSS.

Like all XML documents, XBL documents must begin with the XML declaration.  The root element is the <bindings> element which contains the XBL namespace. Separate binding elements are then defined as children of this element and the elements you wish to add bindings for are then added as children of this element.  XBL files do not have their own extension, they are saved as XML files.

Once your binding file has been created, you then need to create a CCS rule that specifies a class of the element you are creating the bind for and a style rule telling the XUL file were to look to get the binding.  This is typically a chrome URL with a fragment identifier pointing the binding element. 

For example, you may want to define a binding that adds a default menu bar to the top of your window elements.  First, create the XBL file:

You start with the xml declaration, add the root bindings element with the XBL namespace and the XUL namespace with appropriate prefix.  The binding element specifies how the binding will work and holds the content element.  The content element contains the elements that you want to add to the element you are binding to, in this case, your default menus.  Each of the menus are declared with the XUL prefix, this is because they are XUL elements and not XBL elements.  All elements added inside the content element are added anonymously which means that Mozilla treats them as one element.  There are implications to this that we won’t worry about for this example, but that you might need to know for future use, namely that because they are added anonymously, they are not accessible through a script in the normal way.  Save this file as bindexample.xml.