SPAN Your First Letter

Apr 11th, 2008 // Xhtml+CSS

The tag is a tag that groupings of inline content within the content of a page. It can apply to a custom style to a piece of text (a single letter/word and short phrase) within a structural markup tag.

Here is a tiny sample will show how to decorate the first letter of text, make it bigger and stand out by simply using tag. First lets take a look at the following:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam.Mauris semper, velit semper laoreet dictum.

The first letter has defined with large size and improved readlibility. Lets see how easy to make it work, add the following codes to your CSS style file:

.bigletter {color:#333;display:inline;float:left;font:3.6em Georgia,arial;text-transform:uppercase;margin:0.07em 0.14em 0 0;}

Now use tag to define the text to make it work, the markup as following:

Lorem ipsum dolor sit... ...

It’s done, pretty easy. I’ll keep sharing more tricks down the road.

9 Commentsso far, Leave a comment or Pingback.

Or you can use :first-letter pseudo class.

→ fatihturan // Apr 11th, 2008
Hi.

You could also use the first-letter pseudo-element
p:first-letter {color:#333;display:inline;float:left;font:3.6em Georgia,arial;text-transform:uppercase;margin:0.07em 0.14em 0 0;}
Lorem ipsum dolor sit… …

Much more semantic.

→ Raanan Avidor // Apr 11th, 2008
Thanks for sharing the alternate method, actually this trick is to do the same without using pseudo element, well… you really inspired me to bring up some pseudo related tricks

→ yichi // Apr 11th, 2008
I will try it now.

→ footprinter // Apr 12th, 2008
Thank you

→ Peety // Apr 13th, 2008
Good, bt think it not suit 4 wp blogs, cos you may repeat this step every single time…$#%@

→ C.J. // Apr 17th, 2008
I use [span] a lot too but in this case I think pseudo element would be easier because it’ll save you from editing the HTML. Cool. Learned something new about CSS today.

@C.J. With pseudo element, you will not have to repeat span class.

@Yichi As for semi-transparent PNG backgrounds, I’m having quite a lot of problems with IE6 with it. AlphaImageLoader is not working and the Javascript version of the AlphaImageLoader isn’t working either. So, it might be easier to use GIF semi-transparent backgrounds instead if you planning to code for IE6.

I’m thinking of doing the same for IE6 too. It won’t look half as nice as PNG backgrounds but at least it’ll look better than it does now. Hahaha.

→ Ivy // Apr 18th, 2008
Interesting idea, try to use on my website.
Thanks!

→ Ekaterina // Apr 21st, 2008