CSS or HTML code for drop cap

  • Author
  • #358075


    Would someone be kind enough to give me the code for a drop cap? I want all my blogs to have a drop cap in the beginning. The html code I’ve been trying is: <b style = “font-size: 22px; float:left; color: blue; font-family: times” >FIRST LETTER</b>.
    What am I doing wrong? I tried clicking the HTML tab and the visual tab; it’s not taking it. By the way, in the above code, when i typed “FIRST LETTER” I mean the 1st letter. So it’s not part of the code.
    Thanks for your help folks.

    The blog I need help with is sotsil.wordpress.com.


    Moderator Emeritus

    Anyway, what you’re doing wrong is the “b” tags (which stand for bold text); should be “span” – like that:
    <span style="font-size:22px;line-height:20px;float:left;color:blue;font-family:times;">FIRST LETTER</span>
    (You can change the numbers, use a hex color number instead of the generic “blue”, also add further commands for space to the right, borders, background color…)

    And please paste the exact URL of your blog when asking questions here, or link your nickname to your blog (as explained in the Sticky 8 Things to Know Before Posting)



    Thank you panaghiotisadam. Before I posted my question there was a box with my blog URL on it so I figured I did not need to provide it. I apologise for being such a blithering idiot and a slow learner.
    ps: thanks for correcting my code, much appreciated.


    You’re welcome, and you’re no idiot or whatever, you’re just the victim of a badly designed feature: the URL you fill in when starting a thread is for detecting wp.ORG members who often come here instead of their own forum, and it doesn’t transfer to the post although it should.


    And if you need any changes in the dropcap, let me know: my specialty is html!



    Thank you! You’re so kind. I’ll try not to bother members with topics that are probably covered in earlier posts. It’s just that going through 5 pages of previous posts can generate eye fatigue. Sometimes, it’s easier to just google it.
    If you look at my blog on may 1, i managed to create a beautiful drop cap courtesy of mandarin designs dot com.


    Moderator Emeritus

    No, not html speciality. HTML wizardry.
    Please consider linking your name to your blog. This is your blog;
    don’t be shy! here is how to link:
    2. How to make your name link to your blog:
    Go into your dashboard -> users -> your profile -> then scroll down to ‘contact info’. In the spot where it says ‘website’ fill in the address of your blog and save the changes.
    Now… when you comment here and on other blogs, your name will link to your blog. If you do this before you post your request for help, it will allow forum volunteers to be able to help you quicker since they won’t have to ask you for a link and wait until you come back to post one.



    Hi 1tess,
    I just saw your last post today. Thanks so much for your guidance. Sorry, did not acknowledge it earlier. I thought the topic was closed!


    Moderator Emeritus

    No problem. Your drop cap floats look nice.



    Thank you 1tess! I combed the Internet for code until my eyes hurt. it was worth it though!

The topic ‘CSS or HTML code for drop cap’ is closed to new replies.