Recently, I created a custom RTE element style for SharePoint Online. It showed up in the element style list, but did not work. Why?

What I did

.ms-rteElement-HelpIngress {
  -ms-name: "Help ingress";
  font-size: 1.5em;
  font-weight: bold;
}

Well, I wrote everything in a single CSS rule.

What I should have done

p.ms-rteElement-HelpIngress {
  -ms-name: "Help ingress";
}
    
.ms-rteElement-HelpIngress {
  font-size: 1.5em;
  font-weight: bold;
}

I should have used separate rules. The element style definition, containing both the element type to be created - in our case a paragraph element - and the style name, needs to live in a separate rule. I have found examples on how to create custom styles that already do this, but do not emphasize the importance of keeping them separate.