How to apply an external CSS to te edit box.

Remember that class selectors (i.e., .title) have a relatively low specificity in the w3c cascading stylesheets model ( see http://www.w3.org/TR/CSS2/cascade.html ). That just means that your .title css selector is being overridden in the CKEditor editing region (remember that CKEditor uses a lot of styles, too, and some of those may be called .title.) You can experiment with this by increasing the specificity of your selector and viewing the results in the editing region (make sure your browser is not caching the old .css file.)

One method of increasing css selector specificity is by using an id attribute, e.g., setting the id attribute = "title":

 
/* .title - commenting this out in your css file and replacing it with an id selector to, say, change the color and font-size declarations for your titles: */

#title {
    color:#666; /*dark grey*/
    font-size:2.0em; /*very important title*/
}

The above has a higher specificity and so will likely not be overridden by another style declaration from the CKEditor application.

Another method would be to nest your selector, e.g., h2.title.

 
/* .title - commenting this out in your css file and replacing it with an nested selector that increases specificity by giving information about the tag context: */

h2.title {
    color:#666; /*serious dark grey*/
    font-size:2.0em; /*very important title*/
}

Finally, I suggest this third method: use the CKeditor config.js file (or another file depending on your implementation) to attach the appropriate class or id attribute to the CKEditor body tag. This ensures that the css selector hierarchy you define in your .css file is passed on to the CKEditor editing region with little interference from the application itself. There are two different implementations of this method (I'm only giving the first here):

/* in config.js
// add a class or id attribute to CKEditor's body tag to enforce important css selectors
// use config.bodyClass or config.bodyId
*/
config.bodyClass = 'content'; //supports my Drupal installation of CKEditor
// alternatively use config.bodyId = 'content';

Then I can add an additional css selector for my .title attributed elements to my css file:

/* additional selector for .title attributed elements */
.content .title {
    color:#666; /*serious dark grey*/
    font-size:2.0em; /*very important title*/
}

Let me know if you have any questions about these solutions. Finally, you'd know exactly what's going on with the css (why/how your title are being overridden) if you made use of a great developer tool called Firebug (for Firefox). You could use it to pinpoint exactly where your selector is being overridden.

Good luck!