CKEditor – adding custom style sheet

Within the CKEditor editor you can add in custom style sheets to assist with styling of the content within the editor and here is how you do it

CKEDITOR.config.contentsCss = '/css/mycssfilename.css' ;

After you have created the instance of the CKEditor you just need to add in to the configuration the contents cascading style sheet file.


An Cascading Style Sheet (CSS) is basically styles of a page within a block of text. The cascading part means that the last value for a set style will be the value taken, e.g. if at the top of a style sheet there is a value of black for the back ground colour and then white is below that, the white value will take precedence over the black.

Here is a example of styling within the tag body.

       Background colour
              hi world

And this is an example with CSS within the html code.

       Background colour with css
              Hi World

There are many styles options within the html styling list, hopefully shall cover most of these in the future.

Hello World

The (X)HTML uses tags to describe the area of the page, e.g. title tag means the title of the page. The below code displays “Hello World” in the page and the title of the page is “Hello World Tutorial”.

Cut the code from here

Hello World Tutorial

Hello World

if you save that as helloworld.html, and then open up the saved page with your browser of choice.