How can I change the ckeditor iframe CSS styling

Question

I'm unable to figure out how to modify the CKeditor iframe's body CSS styling. I've tried a bunch of options based on various potential solutions around the web, but I'm not very familiar with CKeditor's API which is making things rather difficult. This is (specifically) CKeditor 4.4.3.

You can see the various attempts (commented) at the following JSfiddle:

http://jsfiddle.net/KS3p4/1/

CKEDITOR.stylesSet.add( 'style_updates', [
    // ATTEMPT 1
    // Block-level styles...this is for the dropdown menu (not shown in current config)
    { name: 'Body Margin Fix', element: 'body', styles: { margin: '10px' } }
]);

editor = $('textarea').ckeditor( function(editor){
    // ATTEMPT 2
    //callback `this` refers to CKEDITOR.editor
    this.ckeditorGet().addCss('body { margin:10px; }')
}, {
    // ATTEMTP 3
    addCss: 'body { margin:10px; }',
    stylesSet: 'styles_updates',
    uiColor: '#FFFFFF',
    scayt_autoStartup: true,
    autoGrow_onStartup: true,
    enterMode: CKEDITOR.ENTER_BR,
    removePlugins: 'elementspath, resize',
    toolbar: [
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline' ] },
        { name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'PasteFromWord', 'Undo', 'Redo' ] },
        { name: 'links', items: [ 'Link', 'Unlink' ] },
        { name: 'editing', groups: [ 'spellchecker' ], items: [ 'Scayt' ] },
        { name: 'tools', items: [ 'Maximize' ] }
    ]
// ATTEMPT 4
}).ckeditorGet().addCss('body { margin:10px; }');

Answer 1

Edit the contents.css file that's located in the main CKEditor directory or use the config.contentsCss setting to load a different file.

I see that you confused the styles system settings with content styling. These are two totally different things - styles system is responsible for applying and removing "styles" to selected content - it's used e.g. by styles and format drop downs as well as bold or italic buttons - all of them are "styles".

As for CKEDITOR.addCss() - this method is to be used by plugins mostly and it has to be used before editor is created. Actually, its doc says exactly this and mentions that you should use contents.css ;).