How to add class to an html output element in tinyMCE paragraph drop down menu

In my opinion, using the Styles dropdown is useful to show that the particular style you are adding is special and not the theme’s standard element styling for p, h1, h2, etc.

The examples in the Codex to be pretty good at outlining this: http://codex.wordpress.org/TinyMCE_Custom_Styles

// Callback function to filter the MCE settings
function my_mce_before_init_insert_formats( $init_array ) {

// Define the style_formats array
$style_formats = array(  

    // Each array child is a format with it's own settings
    array(  
        'title' => 'H4 Headliner',  
        'block' => 'h4',  
        'classes' => 'headliner',
        'wrapper' => true,          
    ),  
);  

// Insert the array, JSON ENCODED, into 'style_formats'
$init_array['style_formats'] = json_encode( $style_formats );  
return $init_array;  

 } 
// Attach callback to 'tiny_mce_before_init' 
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );  

Another option would be to just style the h4 element with the “headliner” style you want in your stylesheet. If the “headliner” style is the default, then you wouldn’t really need to add a special class or id.

#content h4 {
    (your styles here)
}