How do I add a Drop cap text (html or image) to my website

Hi,

Can someone please show me where or how to add a Drop cap for the first Letter on my website.

Thanks
Reply With Quote

If you design with CSS, then you can use the following span command.

<span id="cap">T</span>his is a demonstration of how to produce a drop capital with the top of the text inline with the top of the drop capital. (from cssplay.co.uk)

Avoid using an image. If you are wanting a decorative capital, then you will need to use an image

You are in luck!

I discovered a code that works wonderfully for drop caps!

Here it is:

<p>
<span style="float:left;color:#D4D4C7;font-size:44px;line-height:35px;padding-top:3px; padding-right:3px;font-family: Times, serif, Georgia;">F</span></p>

Now here is how you apply it:

First you need to copy the code EXACTLY as above.

Then click on the spot where you want to apply it on your page.

For example, if you want to apply it for the word, 'Share', you would make sure your cursor is in front of the 'S'. Then you would click to see the code in your html editor (such as dreamweaver).

The cursor should appear in the code in the same place that it's at on your page.

Now click where you see the cursor in the code. It should start blinking. You must do this or it won't work!

Then simply delete the 'S' that's in the code, and look for this portion in the code I gave you above: >F</span>

You see where the 'F' is? You replace that with a capital 'S', or any other letter that you so desire to turn into a drop cap (don't forget to capitalize it).

Now when you go back to your page you just simply press refresh, or with some editors you could just click on the page, and you will see that you just made a drop cap!

It's as easy as that!

By the way, you can make it any font you want, and any color as you could with any word

Just replace the code where necessary with what changes you want to make.

You may have to make some minor adjustments, but this is a good starting point.