Adding css class in the Richtext editor

This post is not up to date anymore and may not working with recent versions of sitecore. So please refer to the new post here.

Checking the configuration
In the web.config, check the key WebStylesheet to know witch css is used for the Richtext editor (default value is /default.css)

Configure the css class available
In the css file you may now add your classes and it will be available in the dropdown "classes" of the Richtext editor.

After changing the css file you need to delete your browser domain cache. To do that you may use the developer tools toolbar. In the menu "Cache" select the option "Clear browser cache for this session" (ctrl+d)

The problem is that only simple classes are configurable to allow the selection in the dropdown.
You can use this kind of syntax:

.test {font-weight: bold;}
.test9 {}

But these syntax will be not available in the dropdown (but the rendering will be correct)

.test2 .test3 {font-style: italic;}
p .test6 {font-weight: bold;}
.test7 p .test8 {font-weight: bold;}

If you need to have a default template for the richtext you may complete the body element. So if you need to simulate the rendering in the website like it will be in the content placeholder skin this element.

body { }

UPDATE: It seem that in the new versions of sitecore you also need to update the file
\sitecore\shell\Controls\Rich Text Editor\ToolsFile.xml and change add your classes in the tag classes:

<classes>
 <class name="test" value=".test" />
 <class name="test9" value=".test9" />
</classes>

It also seem that they are some bugs in IE with the caching. So use firefox to test it.