The <span> 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 <span> 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 <span> tag to define the text to make it work, the markup as following:
<span class="bigletter">L</span>orem ipsum dolor sit... ...
It’s done, pretty easy. I’ll keep sharing more tricks down the road.
11:12 am
[...] tanthiamhuat wrote an interesting post today onHere’s a quick excerptThe 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. … [...]
11:12 am
Or you can use :first-letter pseudo class.
11:12 am
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.
11:12 am
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
11:12 am
I will try it now.
11:12 am
Thank you
11:12 am
Good, bt think it not suit 4 wp blogs, cos you may repeat this step every single time…$#%@
11:12 am
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.
11:12 am
Interesting idea, try to use on my website.
Thanks!
11:12 am
In love with your template!
11:12 am
[...] Via: VikiWorks [...]
11:12 am
[...] inicio de un post o de un párrafo, el tema cuenta con la clase “BigLetter” (visto en Vikiworks) y se usa de la siguiente manera: ?View Code HTML1 <span [...]
11:12 am
very nice info thanx!
11:12 am
[...] grande al inicio de un post o de un párrafo, el tema cuenta con la clase “BigLetter” (visto en Vikiworks) y se usa de la siguiente manera: ?Ver código HTML1 <span [...]
11:12 am
I think the span tag is the most awesome thing ever made!