This article discusses how to add styles (classes) to the Styles menu in Joomla!s default WYSIWYG editor, TinyMCE, as shown in the screenshot below.

First of all you need to know that by default TinyMCE looks for styles to load in this drop-down menu from the editor.css file that is located in your template directory. In other words, TinMCE automatically looks for styles from /templates/yourtemplate/editor.css. If you do not already have this file then you will need to create it. Once you have this file it can be accessed and edited directly from within Joomla! via the Template Manager.    

Now, onto some observations about how to get changes you have made to the editor.css file to show up in the Styles menu and what will actually show up in the Styles menu.

1. Sometimes a refresh doesn't seem to load the styles you have added to editor.css into the Styles drop-down.  When this happens you have to clear your browser cache, which means that you will have to login into Joomla! again before being able to see the new styles.

2. As stated before, by default the TinyMCE looks for a file editor.css. If it cannot this file, then it uses its default classes of caption and system-pagebreak. When an editor.css file is found and in use then only the classes in the editor.css file will be listed and not caption and system-pagebreak. These default classes will still work as normal, but will not be listed in the style drop down menu.

3. TinyMCE will ONLY SHOW CLASSES in the Styles menu. You can add ID tags to the editor.css file and they will function correctly if you put them in the HTML of your content but the IDs will NOT show up in the Styles menu.

4. It seems that tinyMCE only picks up styles when you list them first without a parent.  So for example, if you have:

div.style1 p {somecode}
div.style1 p.style2 {more code}

div.style1 p {somecode}
p.style2, div.style1 p.style2 {more code}

There is also another method to do this by adding the path to your custom css file in the preferences/settings of TinyMCE through Joomla's plugin manager and you also have to be sure that you have linked to this style sheet in the index.php file of your template. 

For example, many people use the/an editor.css file located in the system template folder as the file from which to load Styles in TinyMCE. This path to this file is /templates/system/css/editor.css.

In this case you would then need to add the following link to the stylesheet in the index.php file of your template (/templates/yourtemplate/index.php):

<link rel="stylesheet" href="/templates/system/css/editor.css" type="text/css" />