How to i style the elements from the TinyMCE

Question

if i have a paragraph with class "test" in the TinyMCE editor how do i style the paragraph using my style.css file in my theme or do i need to make a separate file and if so how would i go about that? By the way i can see the style i apply from the style.css file when i go to the visual TinyMCE editor but not when i preview the page

Answer 1

You can use the custom CSS field in the customizer if your theme supports it. Or you will have to create a child theme and add the custom css to your child theme's stylesheet.

Answer 2

The class that you assign the the paragraph is key to your styles.

in your style.css (hopefully it's a child theme)

Just add

.test {
  color: blue;
}

or what ever property you're trying to change.

Answer 3

WordPress has a feature called editor styles.

To use them, simply call add_editor_style() in your theme's functions.php file and add a new editor-style.css file. This will be picked up inside the TinyMCE editor to style content.

Use something like add_editor_style( 'css/custom-editor-style.css' ); if you want to use a different file (like your existing style.css for example).