Custom theme css separate from editor css
First, let me add that the answer that I am about to give is the way I would handle it. This could be done in many ways. 

Create a separate stylesheet for your text styling (we usually call it style-type.css) and place it somewhere appropriate in your theme (for example /sites/all/themes/your_theme/css/style-type.css), also use this file for your front-end. Only add styling in this stylesheet for textual styling, so for h1, h2, strong, em, etc... 

Then use the admin/config/content/wysiwyg admin page to define the CSS in the appropriate format. We mostly don't use the replacement patterns (like %b) and simply fill in the path relative to your Drupal install (of course, the patterns could be applicable in your case): /sites/all/themes/your_theme/css/style-type.css. Make sure Define CSS is the active option above the path.

If you need extra styling for stuff like highlighted text, simply make sure you have that styling in your style-type.css. For example .highlighted { color: yellow; }. And then define it in the CSS Class textarea as follows:

Highlighted=highlighted


Then also make sure you've got the plugin Styles enabled. This will give you a dropdown list on the WYSIWYG editor which allows you to add styling that you defined to texts.