Targeting Specific Letters in <h1> Tag?

Hello,

I'm trying to format an <h1> tag in such a way that it'll be able to target specific letters within the tag for independent styling while still being readable to search engines.

For example, the <h1> tag on my website will function as the logo text and I want the letters to be in all caps. However, I want the first letters of each word slightly larger.

Such as: WEBSITE TITLE

To achieve the effect visually, I wrapped the two letters I wanted to target in spans and in the CSS, gave that font a larger size. This renders fine on the web page but I doubt search engines would pick up on the title this way. Example:

<h1><span id="logoCaps">w</span>ebsite <span id="logoCaps">t</span>itle</h1>

What would be a better way to code this?

Thanks for any advice you have to offer.

simple add a span class to each letter like so...

<h1><span class="big">W</span>website <span class="big">T</span>itle</h1>

span.big { font-size: 40px; }

Or use the pseudo-class :first-letter to target the letter...



h1:first-letter {font-size: 40px; }


This way may be more browser friendly.

Ha, Success! It took a bit more tweaking to get the full effect I wanted but the h1:first-letter pseudo-class worked perfectly when containing each word in it's own <h1> tag.

Thank you!