Copy Existing Style.css 

TinyMCE is now using the new CSS file that you've added, but what styles should be added to the file?

We want to keep this file as small as possible, so we should only add styles for elements that wil display in the editing text box, such as headings, paragraph and bold styles. We can leave out structural elements such as structuring styles used to create multi-column pages.

Open the style.css file of your theme and copy across  styles that format text - quickest way is to copy accross eveything and remove what is not required.

Modify TinyMCE CSS

Now the real work begins! 

There are some elements that need to be overridden because TinyMCE puts the contents of the editing box in an iFrame. Any elements that rely on inheriting their style from the body element need to be changed like this:

body.mceContentBody

Example:

body h1{
  font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, Verdana, sans-serif;
  margin: 0;
}

Change to... 

body.mceContentBody h1{
  font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, Verdana, sans-serif;
  margin: 0;
}

Any element that relies on inheriting a style from .content should work if you remove '.content ' from it.

.content h1 {
  color: #369;
  font-size: 1.9em;
}

Change to...

h1 {
  color: #369;
  font-size: 1.9em;
}