How to set custom Styles for dropdown menu within editor?

Hi,

I've followed the instructions given in the Documentations, but I'm still unable to set/define custom styles in place of the default ones that appear in the Style dropdown list. I've created a new XML styles and defined it in the Config file (instead of the defalt "fckstyles.xml"). But I get a Javascript when the Editor loads and the 'Style' dropdown option does not appear at all. Even if I just tried to add one style to the origianl 'fckstyles.xml' it will load the drop down list, but the new style I defined will not appear. Here is my code in my custom styles XML file:

<?xml version="1.0" encoding="utf-8" ?>
  <Styles>
   <Style name="Title1" element="span">
      <Style name="font-size" value="1.125em" />
      <Style name="color" value="#5f83cb" />
      <Style name="font-weight" value="bold" />
   </Style>
   <Style name="Title2" element="span">
      <Style name="font-size" value="1.00em" />
      <Style name="color" value="#fe9901" />
      <Style name="font-weight" value="bold" />
   </Style>
   <Style name="Text2" element="span">
      <Style name="font-size" value="1.115em" />
      <Style name="color" value="#666666" />
   </Style>
</Styles>

I also read in the Documentation that you can set the Styles using CSS file (which would be so much easier for us), but after I define the CSS file name in the config file, it has no impact to the Style dropdown and the styles I defined are not displayed.

Can any one help? I've followed the Documentations over and over and have had no sucess! Any step by step instructions would be very much appreciated.