The simple answer as to why this happens is in the term 'WYSIWYG'. Content editors like TinyMCE attempt to allow users to see what the text they're entering will look like when it appears on the front-end of the website. To this end, they show the text against the color or image specified in the template_css.css file of whatever template the front-end of the website is using.
This often presents a problem for users when their website is designed to appear as a lighter content pane floating over a darker-colored background. The darker background is what appears in the editor windows, making the text almost impossible to see. In such cases, it may be necessary to tell the editor not to use the template_css.css file as a reference, but rather to use a different css file instead.
Posted in: Joomla