Cascading Stylesheet
How to apply the css drop caps effect to paragraphs within your webpage. Copy and paste css code for webpage design.

Bookmark This Page | Click here for more css scripts

Cascading Style Sheets make designing webpages a breeze. By applying this simple copy and paste CSS drop cap effect, we force the first capital letter to span about four or five lines. You must also type 4 or 5 lines of text for this to show up but it does give a large boring block of text a great look and also gives your webpage a professional feel.

The font type, color and size is easily controlled within the style sheet and you can use the effect on as many paragraphs as you choose.

Here's how it's done.

First, copy the css code in the text box below and apply the stylesheet to the head of your html document. Notice that we have called the style .dropcap, you can call this anything you like just apply the same name to the second part that goes into the body. Change the color to suit your webpage color scheme and the font family also. You can play around with the font size, the line height and padding to see the different results.

Secondly you apply the code below to the first letter in the paragraph just like we have done to this sentence. Remember it is applied to the first letter only. In this example within the text area it is the letter "S" and looks like this <p><span class="dropcap">S</span>

Copy the css code in the text area below and paste this within your body at the beginning of the paragraph where you want the css drop cap effect to appear on your webpage. You can apply this css code to as many pharagraphs as you want on the same webpage.