March 20th, 2005 | No Comments
Large First Character With CSS
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
HTML
HTML Code example
The old method
CSS
HTML
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.
WV4 is the online home of Rob Lewis, featuring a blog covering a variety of subjects, mainly web design, CSS and PHP, as well as featuring useful links to other websites.