You need to pass your own style definitions to the CKEDITOR.stylesSet.add function, giving them a unique name, and then configure the editor to use them by setting the stylesSet value.
CKEDITOR.stylesSet.add( 'my_styles',
[
// Block-level styles
{ name : 'Blue Title', element : 'h2', styles : { 'color' : 'Blue' } },
{ name : 'Red Title' , element : 'h3', styles : { 'color' : 'Red' } },
// Inline styles
{ name : 'CSS Style', element : 'span', attributes : { 'class' : 'my_style' } },
{ name : 'Marker: Yellow', element : 'span', styles : { 'background-color' : 'Yellow' } }
]);
Depending on whether your definitions were placed inline or in an external file, you need to set the stylesSet configuration setting accordingly.
// For inline style definition config.stylesSet = 'my_styles'; // For a definition in an external file config.stylesSet = 'my_styles:http://www.example.com/styles.js';
For more details on the definition format and best practices on how to customize the styles please refer to the Styles article from the Developer's Guide.