Help with html5 header and css

[asw]

I am trying to create a header and would like to have the first letters of each word in the name stylized differently than the rest of the name. So this is what I did:

T

he

C

ompany

N

ame

There has to be a better, cleaner way to do this, but if there is I don’t know it. Hopefully someone out there can help.
Thanks,
Aaron

[TT_Mark]

There is a pseudo element in CSS called :first-letter. Not supported in all browsers but then nothing you’re already doing is ;-)

[sliver37]

Strictly HTML + CSS-wise you could do (as ChristopherBurton said) span tags.

The Company Name

And in the CSS you would do something like:

h1 { color: blue; }

h1 span { color: red; }

I’m sure there are Javascript techniques that could also achieve it, and as TT_Mark suggested :first-letter (which is the cleanest way by far) though good old spans have the widest browser support.

[asw]

I appreciate the span technique which is probably what I will end up doing.
When I try ::first-letter, I am having to place each word in a different h1, otherwise the only thing that happens is the the first letter of the first word is affected. That doesn’t seem like how first-letter was supposed to work?

[TT_Mark]

First letter only affects the first letter of each word, but then you can place each word in a span tag

[sliver37]

Yeah first-letter should affect the first letter of each word, which I thought was the case. I haven’t really had a chance to use it to be honest.

Either way, spans are definitely better than multiple H1 tags. Good luck with the rest of your site. :)

[Author]

Posts