Styles are pre-defined combinations of various formatting options that make it easier to keep the presentation of the text uniform. What is more, since a style often contains a number of features at once, when you want to customize the way a text fragment looks, you do not need to change a font, its size, or text and background color separately.
To use your own styles, open config.js and use a code similar to this one:
// The set of styles for the Styles combo CKEDITOR.stylesSet.add( 'default', [ // Block Styles { name : 'Blue Title', element : 'h3', styles : { 'color' : 'Blue' } }, { name : 'Red Title', element : 'h3', styles : { 'color' : 'Red' } }, // Inline Styles { name : 'Marker: Yellow', element : 'span', styles : { 'background-color' : 'Yellow' } }, { name : 'Marker: Green', element : 'span', styles : { 'background-color' : 'Lime' } }, // Object Styles { name : 'Image on Left', element : 'img', attributes : { 'style' : 'padding: 5px; margin-right: 5px', 'border' : '2', 'align' : 'left' } } ]);
See the original documentation page for more.