Text ignoring formatting tags

• 

  robertjarosh · Member · Feb 24, 2012 at 3:35 am

  • Copy link
  • Add topic to favorites

  I have a page on my WordPress.com site that I’ve added color to text, yet it’s not showing up on the page. In the “Visual” editor, it’s showing up like the code should be. But when I look at the website, it’s all black and white. What’s going on here? Here’s a sample of my code:

  [code]

  Experience</span></h1>
  Godspell, 2011</span>[/code]

  This should make the word “Experience” the color specified (a blue), and the word “Godspell” a green color. But when I navigate to the page, it’s all black. Any help would be greatly appreciated. Thanks

  The blog I need help with is: (visible only to logged in users)

• 

  robertjarosh · Member · Feb 24, 2012 at 3:39 am

  • Copy link

  Sorry I used a BB tag above. This is the code I’m using copy and pasted from the HTML editor on the page:

  <h1><span style="color: #3399ff;">Experience</span></h1>
<span style="color: #008000;">Godspell, 2011</span>

• 

  justpi · Member · Feb 24, 2012 at 4:26 am

  • Copy link

  That’s because the CSS of the theme you’re using specifies black for text enclosed in strong tags. So you need to use inline CSS instead of the strong tags, but only for the “Godspell, 2011” line: h1 is bold already, so the strong tags are superfluous.
  In addition: The span tag is used for characters, words or phrases contained in a text block. When you want to change the style of the whole block you don’t add a span tag, you add the style attribute to the tag of that text block.
  In all, the coding should be:

  <h1 style="color:#39f;">Experience</h1>
  <span style="font-weight:bold;color:#080;"><em>Godspell,</em> 2011</span>

  PS When referring to a published post or page, it’s more useful if you paste its URL instead of trying to paste its code: first, we can see your code, second, it includes tags you don’t see in the HTML editor.

• 

  robertjarosh · Member · Feb 24, 2012 at 4:34 am

  • Copy link

  Ahh that makes sense. And works like a charm. I didn’t even think about the CSS of the theme…It’s been a few years since I’ve done anything with web design :P

  Thanks for taking the time and checking this out for me. Much appreciated!

• 

  justpi · Member · Feb 24, 2012 at 4:55 am

  • Copy link

  You’re welcome.

  By the way, a word of caution re using h tags for formatting. If at some point you decide to switch to a different theme, you may be unpleasantly surprised, because the default styling of h tags varies from theme to theme; example:
  http://wpbtips.files.wordpress.com/2011/03/headingspecimens.png
  So, if your intention is headings that match the default ones of the theme you’re using, h tags are ok. If the intention is large-bold-blue, then instead of this:
  <h1 style="color:#39f;">Experience</h1>

  you could write this:
  <p style="font-size:200%;font-weight:bold;color:#39f;">Experience</p>

  Same result, but it’ll stay the same no matter what the theme.