Sound familiar? Well, there is often a reason for this, and it makes sense once you have an understanding of what’s going on behind the scenes.
The quick solution is, when you select the text that you want to change the formatting on, remove the old formatting first, using the “Remove Formatting” toolbar icon , and then apply the new formatting to it.
For those who’d like to know more…
When you select some text in the editor, and then apply formatting, such as changing the colour, font size or style of the text, what happens in the background, is that the editor ‘wraps’ HTML and/or CSS definitions around the text.
Sometimes, a combination of various changes to the formatting around the same pieces of text can cause multiple definitions to be wrapped inside each other.
The most common cause of this is pasting the text from somewhere else, either from another website or from something like Word, which brings along a lot of formatting without you even being aware of it.
So, when you select the text again and try to change say, the colour, the editor will wrap the text in the format definition for that colour, but inside that definition is another one, setting it to a different color, and so the text stays the colour of the innermost definition.
When you remove the formatting, it removes all of the formatting, allowing you to start afresh.
For those who a little more adventurous, an interesting exercise is to write a couple of paragraphs in Word, start a new post, then copy and paste from Word directly into the new post, then click the HTML tab on the top right of the editor toolbar and you will have a small glimpse into what you’ve just pasted. (Remember to click the Visual tab to take you back to normality?)
Note: there’s no need to save the post to see this.
As a comparison, remove all of this text (or create another new post) and type the same paragraph text directly into the editor, then click the HTML tab and see how much less ‘stuff’ is there.