This tip and the Redactor code samples were posted by Danny Richardson (@Danny on Slack) in the Statamic Slack channel.

He needed a way to add CSS class names into Redactor's formatting. It was also important to make it so that the content authors could visually see the difference when the normal p element verses one with the new .large CSS class applied to it. I'm assuming you should be able to apply this technique to any HTML elements Redactor supports.

I thought it was really good and wanted to re-post it here so it's more easily findable in the future in addition to being within the Slack.

He also recommended updating override.css with additional styles. I wrote some quick CSS to demonstrate.

Settings.yaml (Path to the file is: /site/settings/system/system.yaml)

    name: Standard
        - formatting
        - bold
        - italic
        - link
        - unorderedlist
        - orderedlist
        - alignment
        - html
        - image
        - file
          tag: p
          class: large
          title: 'Large'

Override.css (Path to the file is: /site/helpers/cp/override.css)

/* set whatever size and color values you want */
.redactor-editor p.large {
 color: pink;
 font-size: 160%;
/* Format the drop down menu item */
.redactor-dropdown .redactor-dropdown-p-large.redactor-formatting-p-large {
  font-size: 24px;
  line-height: 36px;
  font-weight: 700;