Can I change the looks of only the lowercase/uppercase characters in a line of text?

Imagine that you have some text like this: "Asdf"

I want the 'A' to be bigger than the rest of the text without having to do some evil CSS hacks with multiple divs and whatnot.

And I was thinking that if you could change the properties of ONLY the uppercase letters, then I would be able to set the font-size to something bigger than the开发者_开发百科 rest, and thus get a bigger A.

You could use the first-letter pseudo selector. It's not fully cross browser though (I think).

Quirksmode has a compatibility chart and some details : http://www.quirksmode.org/css/contents.html

http://www.quirksmode.org/css/firstline.html

You can use a font containing only the enlarged uppercase character, and let the browser's own font fallback mechanism to use that font only for the uppercase letters. The font-family property would look something like:

font-family: 'large-georgia', Georgia, serif;

@font-face or data URL can be used to provide the font. The technique is the same as that used in the this article, only we're now using a set of capital letters instead of an ampersand.