Farbige Überschriftenzeile

Hallo zusammen,

ich habe folgendes geplant:

Ich möchte eine neue Überschriftenart einführen. Diese soll so gestaltet werden, dass die ganze Überschriftenzeile mit einem farbigen Hintergrund hinterlegt ist. Als Trockenübung habe in einer html-Datei folgenden Code implementiert:

.Überschrift {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: bold;
    background-color: #C9C9C9;
}

<p class="Überschrift">Überschrift</p>

Das hat auch soweit erst einmal funktiontiert. Jetzt möchte ich das in Joomla umsetzen. Dazu habe ich eine neue editor.css erzeugt und diesen Style dort hinterlegt. Jetzt kann ich auf diese Format über "Formate" in der Menuleiste verfügen.

Leider setzt der Editor das aber nicht so um, wie ich mir das vorgestellt habe. Der Editor erzeugt folgenden Quellcode:

<p><span class="ueberschrift_blauer_hintergrund">Überschrift</span></p>

Das führt jetzt natürlich dazu, dass nicht die ganze Zeile / ganzer Absatz mit einer Farbe hinterlegt wird, sondern lediglich die einzelnen Wort. Nachfolgend noch einmal der Unterschied im Bild.

Gibt es eine Möglichkeit, dass ich das wie gewünscht umsetzen kann? Leider habe ich alle Überschriften h1 - h6 schon anderweitig verbraucht...

Vielen Dank für Eure Hilfe.

Maumi

Kleine Ergänzung: Im ersten Post war ein Fehler

<p><span class="Überschrift">Überschrift</span></p>

Aber macht das einen Unterschied, ob ich das über eine User.css mache?

Das hat, wie gewünscht, funktioniert.

Vielen Dank für die Hilfe.

Maumi