Thank you for this thread. I didn't think it was supported to add a style to a tag like this. Unfortunately, It's not working for me. I'm using Windows Vista with Firefox 3.01.
Via a skin, I have a CSS file selected for the EditorCSSFile, and that CSS file is in the site's theme folder. The CSS file has styles Red, Green, and Blue. All they do is set the color.
I have content that is wrapped in any tag (I tested H1, p, and li). I click inside the text, click on the tag name at the bottom of the page, it highlights all of the text in that tag, and then I select a style from the CSS selector. It still puts a span tag around the text rather than applying the style to the tag.
Interestingly, I had an HR tag, but I could not select it as you did. It ignored my clicking on it. I saw no handles and I didn't see the tag at the bottom of the editor. I got frustrated and clicked the line several times, and I noticed that it would toggle selecting the HR tag (as shown below the editor, but without showing handles on the line itself.) When the HR tag was shown at the bottom, I clicked it, then selected a style. It REPLACED the HR with a non-breaking space and wrapped it in a span!
I watched your video, and followed the steps exactly.