In the Mura interface you can select predefined text styles to add to your rich text content, right from the editor toolbar.

To extend the list of available styles is simple

Find the 'styles.js' file, usually at: \[site]\includes\themes\[theme]\js\editor\styles.js **

Then, add your styles, using the same format as those already in the file, for example

view plain print about
1{ name : 'Caption Paragraph', element : 'p', attributes : { 'class' : 'caption-text' } },
2    { name : 'Center Text', element : 'p', attributes : { 'class' : 'center' } },
3    { name : 'Large Intro Paragraph', element : 'p', attributes : { 'class' : 'intro' } },
4    { name : 'Image w/ Spacing', element : 'img', attributes : { 'class' : 'imageborder' } },

In general all you need to do is apply a class to an element. While you could provide other attributes, it is recommended to let your stylesheet handle those wherever possible.

** (Update: I had trouble with the browser caching this file, even on a forced reload. However, I found you can also use "styles.js.cfm" as the file name, and it will be included and updated as expected when making changes and refreshing the page)

As for how those actually look inside the editor window, the editor gets its CSS styles from a file


and, opening that you can see, below the long mura comment, something like

view plain print about
1@import url(../../../../css/reset.css);
2@import url(../../../../css/mura.css);
3@import url(typography.css);

So as long as one of those imported files has a class to match your styles in the editor.js, e.g.

view plain print about
2font-size 11px;
the style will be applied in the editor just as it will on the front end (presuming your display templates are using the same css files).