How To Highlight Certain Words in Your WordPress Blog

Written by Costa on November 10, 2009 - 11 Comments
Categories: Theme Modification Tips

colored-fonts

A really simple tip for those who is entirely blind to html. There will be times when you want to highlight certain words with a bright background to emphasize the importance of the words. There are two ways to achieve this. One is to add another class in your stylesheet so when you write a post you can simple tag them with your CSS stylings. This method has it’s limits as every word you tag will have the same highlight color.

A more versatile method will be to use the span tag. With this you do not need to add any CSS codes and you can choose any colors you like for every different word you want to highlight. For example:

<span style="background:#00FFFF">This is a Cyan background</span>

results in:

This is a Cyan background

<span style="background:#FFFF00">This is a yellow background</span>

results in:

This is a yellow background

You can go even further like specifying the size and color of the fonts

<span style="background:#00ffff; font-size:18px; font-weight:bold;color:#FF0000">This is bold text in red</span>

results in:

This is bold text in red

Or if you like, you can just colorize the fonts without any backgrounds

<span style="color:#ff0000">This is a red color font without background</span>

results in:

This is a red color font without background
<span style="color:#ffff00; font-size: 20px; font-weight: bold">This is bold red text without background</span>

results in:

This is bold red text without background

Let your imaginations fly.

  • Advertisements

6283decaf75e3ccfcf66bcbe843dd6a6

Article by Costa Fong

@costafong

Who loves to mod and mess up WordPress Themes.

Costa has written 557 articles here. Some are awesome, some are lame.

If you enjoyed this post, whether it's awesome or lame, consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

SUBSCRIBE NOW to receive free Photoshop Action scripts for creating beautiful eCovers.


FREE Photoshop Action Scripts For Subscribers Only. Download link is at the bottom of the article when you receive your feeds.
ENTER YOUR EMAIL

REMEMBER TO CONFIRM YOUR SUBSCRIPTION

Other Awesome Articles

  1. CSS Codes To Highlight WordPress Post Background Color.
  2. How To Give Your Own Comments A Different Look In WordPress
  3. 10 Bold Fonts To Create Beautiful Blog Theme Headers
  4. How To Add Colors To Your Theme Sidebar
  5. Add Text And Image Shadows To Your WordPress Post
  6. How To Align Your WordPress Quotes Left Or Right
  7. How To Change WordPress Theme Fonts
  8. How To Make Web Buttons

Users who found this page were searching for:

  1. how to highlight certain words in a text
  2. text highlight in wordpress
  3. highlight wordpress text
  4. text in wordpress highlight
  5. how to highligh words in wordpress
  6. how to highlight text wordpress
  7. "highlight certain words" in word 2007

11 Responses to “How To Highlight Certain Words in Your WordPress Blog”

Comments

Read below or add a comment...

  1. Kim
    November 10, 2009 at 1:26 pm

    Another great blog design tip — thanks, Costa!

    Reply
  2. RT Cunningham - Untwisted Vortex
    November 11, 2009 at 3:25 am

    Blame the CSS purists for emphasizing style sheets more than inline styles. Both have their uses and I use both.

    Reply
  3. Ray-Sketch
    January 9, 2010 at 2:44 pm

    3 words , You Are Awesome!

    Reply
  4. Mitko
    January 10, 2010 at 2:45 am

    “Blame the CSS purists ” I think it’s more about blame the Search Engines that kinda force you to use CSS or otherwise they show some kind of warning and stuff.

    And if you want the SEs to love you, you gotta play by their rules!

    Reply
  5. Mitko
    January 11, 2010 at 8:58 pm

    Comment moved by Admin

    Reply
  6. Mitko
    January 11, 2010 at 9:01 pm

    Comment moved by Admin

    Reply
  7. Mitko
    January 11, 2010 at 9:02 pm

    :( I wrote all this under the wrong article, Costa can you erase them or move them sorry for the spam

    Reply

Trackbacks

  1. Costa says:
    November 10, 2009 at 3:12 am

    Latest update from Blogigs.com – How To Highlight Certain Words in Your WordPress Blog Read all of it here http://bit.ly/3RDy8H

    Reply
  2. Buildify Blog says:
    November 13, 2009 at 4:31 am

    How To Highlight Certain Words in Your WordPress Blog http://bte.tc/xWr #RTW

    Reply
  3. Highlight certain words « Live says:
    July 24, 2010 at 11:28 pm

    [...] July 24, 2010 in Uncategorized Take a look at this link [...]

    Reply


Share Your Thoughts...