Large First Character With CSS

1Rob Lewis • 20th Mar 2005 • WorkBench

In brief:

Use CSS to style a large first character in a paragraph. An old typography effect.

The Code

Update

Although I had suspected it might be the case, but I had neglected to investigate, it is in fact possible to use the CSS pseudo-selector “first-letter” to apply a style to the first character, despensing with the need for a <span>. As this is CSS1.0, the browser compatibility of this is pretty widespread (personally tested in Forefox/Win, IE6.0/Win and Opera/Win).

CSS Updated

CSS Code example

HTML
HTML Code example

The old method

CSS

CSS Code example

HTML

HTML Code example

I’ve never been a big fan of using <span> tags, but for the moment I think this is the only way to achieve this effect.

PHP

For the record, here is the PHP function I use to add the span to a string:
PHP Code example

The Result

I’ve had a redesign, so my old page headings which featured this effect are now gone. I’ll post up another example when I get chance, although if you have a play with the code snippets above you should be able to get it to work anyway.