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.