Consider this site title:
It’s a little hard to tell, but I’ve set it up so that the two words, “Itchy” and “Banquet,” have different CSS styles.
As far as I know, WP simply spits out the title into a div or h1 or whatever and it is what it is. Our needs were different so I cooked up a small bit of Javascript and CSS to split the individual words out and apply different classes to them. Here’s how it goes.
You’ll need a theme that lets you add custom styles and scripts; or a plugin that does the same such as the CSS & JavaScript Toolbox. Then use this (my comments might be helpful):
var words = jQuery('#header h1 a').text().split(' ');
//An array of the words, or whatever else is separated by spaces, in the title.
//You could extend this to individual L E T T E R S if you wanted.
//The jQuery elementmay vary depending on your theme.
//On this blog, for instance, the line would look like this
//var words = jQuery('#site-title a').text().split(' ');
var newstring = '';
for (var i=0; i<words.length; i++) {
newstring += '<span class="word_' + i + '">' + words[i] + '</span> ';
}
//We build up a new string, wrapping each individual word
//in a span with class "word_0" "word_1" "word_2" etc.
jQuery('#header h1 a').html(newstring);
//Then replace the existing title with the newly generated HTML.
var words2 = jQuery('#header h2 a').text().split(' ');
//This does the same thing with the site subtitle, if you like.
var newstring = '';
for (var i=0; i<words2.length; i++) {
newstring += '<span class="word_' + i + '">' + words2[i] + '</span> ';
}
jQuery('#header h2 a').html(newstring);
The new code looks like this:
<h1 class="blogtitle left"><a href="http://ib.tom-mcgee.com"><span class="word_0">itchy</span> <span class="word_1">banquet</span> </a></h1>
And then add this, or something, to your CSS.
.custom-header h1.blogtitle a span.word_0,
.custom-header h1.blogtitle a span.word_0,
.custom-header h1.blogtitle a span.word_0,
.custom-header h2.blogtitle a span.word_0,
.custom-header h2.blogtitle a span.word_0,
.custom-header h2.blogtitle a span.word_0 {
color: #351F15;
margin-right: -0.5em;
}
That’s probably more than you need, but you get the idea. The first word (word_0) has styles that override the style for the rest of the header.