Using CSS to Create a Drop Capital Effect within a Web Page

Discussion in 'CSS' started by pabin2009, Sep 4, 2009.

  1. #1
    You can use CSS (Cascading Style Sheets) Style Tags to create a drop capital effect within your web page.

    If you would like to display the first letter of your paragraphs with a drop caps effect, place the following code within your HTML between your <HEAD> and </HEAD> tags.

    <style>
    .dropcap:first-letter{
    float:left;
    color:black;
    font-size:250%;
    }
    </style>

    Change the text indicated in red to your preferences.

    The "dropcap" text specifies the name of the code. You can name it whatever you'd like. However, you must use the same name within your "p class" code below, as well.

    Place the following code before your paragraph.

    <p class="dropcap">Welcome

    This is just one small example of how you can use CSS (Cascading Style Sheets) Style Tags within your web page.


    thank you
     
    pabin2009, Sep 4, 2009 IP