Drop Caps are the first letter of a paragraph that is larger than the rest of the text . Drop Caps are used for many years in magazines, newspaper and desktop publishing giving the readers a first nice impression and the push to read more. In website publishing it is a very good way of creating a more stylistic, attractive and readable text. So, this is how we can create a drop cap with css.
Creating a Drop Cap With CSS.
Suppose that you have a paragraph like this.
This is a paragraph, here we are testing how to create a drop cap to enhance user readability. A drop cap
is usually put in the beginning of the text. Is recommendable to put just one in the entire article.
With the new css selectors you can create a beautiful Drop Cap for this paragraph using this code.
With CSS we are selecting the first letter of the <p> element. Then we change the font size because we want it to be the biggest letter in the paragraph. The padding right is for giving a space between the Drop Cap letter and the paragraph letters.
… And Voilá, Capital letters all the way!!.