What you are looking for are custom styles for the SharePoint RichText editor. The nice thing is that all you have to do is add some custom CSS and SharePoint will magically render new text styles. you can also do this with SharePoint Designer if you have a custom master page or if you just specify the alternate CSS somewhere.
The "magic" CSS is something like the following:
.ms-rteStyle-MySpecialStyle {
-ms-name: "My special style";
font-style: bold;
color: red;
}
h2.ms-rteElement-SpecialHeading{
-ms-name: "Special Heading";
font-style: bold;
color: green;
}
The difference between the two is the rteElement
vs. rteStyles
, but the difference becomes clear once you look at your screenshot: Page Elements and Text Styles. The difference is that you style particular elements with one, e.g. H1, H2, SPAN, and you style text passages with the other - SharePoint actually adds a span
tag around the text and assigns it your style.
Enough of the words, a couple of complete blog articles to help you get started: