How to change how WYSIYG styles things? Instead of using HTML underline tags, I want the WYSIWYG editor (CKEditor) to wrap a span around the highlighted text. Does anyone know how I can achieve this? Thanks!
Sure see this great blog post titled WYSIWYG Module + CKEditor: Taming the Beast by Fuse Interactive. I am not affiliated with the company nor the author of it -- it's simply a great resource.

Linked in those blog comments is a link to the CKEditor Configuration Options documentation, which is what you'll end up altering to make this happen.

In the blog post they supply their own config settings for the editor in javascript. I believe you can set all these values in hook_wysiwyg_editor_settings_alter, the settings for the Styles look like:

  { name : 'Float Right', element : 'div', attributes : { 'style' : 'float:right;' } },
    { name : 'Float Left', element : 'div', attributes : { 'style' : 'float:left;' } },


Where this defines a style called Float Right that wraps the selected text in a div with some inline styling. I believe you can easily assign classes instead of inline styles as well.

This should be a huge jumping off point for you to figure it all out. Best of luck!