Search
Close this search box.
Search
Close this search box.

Styles

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.