• Home
  • Subscribe
  • Contribute Us
    • Share Your Interview Experience
  • Contact Us
  • About
    • About CSEstack
    • Campus Ambassador
  • Forum & Discus
  • Tools for Geek
  • LeaderBoard
CSEstack

What do you want to Learn Today?

  • Programming
    • Tutorial- C/C++
    • Tutorial- Django
    • Tutorial- Git
    • Tutorial- HTML & CSS
    • Tutorial- Java
    • Tutorial- MySQL
    • Tutorial- Python
    • Competitive Coding Challenges
  • CSE Subject
    • (CD) Compiler Design
    • (CN) Computer Network
    • (COA) Computer Organization & Architecture
    • (DBMS) Database Management System
    • (DS) Data Structure
    • (OS) Operating System
    • (ToA) Theory of Automata
    • (WT) Web Technology
  • Interview Questions
    • Interview Questions- Company Wise
    • Interview Questions- Coding Round
    • Interview Questions- Python
    • Interview Questions- REST API
    • Interview Questions- Web Scraping
    • Interview Questions- HR Round
    • Aptitude Preparation Guide
  • GATE 2022
  • Linux
  • Trend
    • Full Stack Development
    • Artificial Intelligence (AI)
    • BigData
    • Cloud Computing
    • Machine Learning (ML)
  • Write for Us
    • Submit Article
    • Submit Source Code or Program
    • Share Your Interview Experience
  • Tools
    • IDE
    • CV Builder
    • Other Tools …
  • Jobs

[Solved] How to Create Drop Cap using CSS and HTML Code?

Aniruddha Chaudhari/20046/2
CodeHTML & CSS

While surfing the internet and looking at some of the webpages, ever wondered- What’s that First capital letter of the article content that goes the deep couple of lines?

drop cap using HTML and CSS

This is nothing but the Drop Cap. It can be an initial letter or word or sentence (even paragraph, but not recommended).

In this tutorial, I am going to give you simple code snippet to create drop cap using CSS and HTML tags. Using which you can set drop cap on your website, just by copy-paste.

The main intention and purpose of using Drop Cap are to attract the readers and to makes your content more lucrative. There are many content delivery websites or blogs use Drop Cap.

Drop cap has the history. And you can see it is used in magazines for long ages. Now it has carried forward to design web pages with simple HTML and CSS code tweak.

If you are a web developer you can easily implement Drop Cap with just a couple of HTML and CSS code.

Code to Create Drop Cap using CSS and HTML

There are two ways to implement Drop-Cap on your webiste.

#1 Using class attribute

<head>
<style>.drop_cap {
color:#888; 
float:left; 
font-size:3em; 
font-style:normal; 
text-shadow:#333 1px 1px;
}</style>
</head>
<body>
<span class="drop_cap">R</span>ahul Dravid makes history by coaching U19 Cricket player. 
Under his guidance, U19 players won the world cup. India has won the world cup four times which is more than any other cricket playing country in the world. It is all about the teamwork and effort made by their coach, Rahul Dravid. Well done, India!!
</body>

The above is just an example. You can modify the various parameter value as per your need such as changing the color of Drop Cap, increasing font style and size, text shadow, dept of the drop-cap…

In this method, you have to update each HTML page to add the class attribute for the first character. It is Hectic.

But what if you already have many web pages ready and you don’t want to go to each web page and add a class attribute in your HTML code.

So here is the simple tweak.

#2 Using first-child:first-letter:

There is first-child:first-letter which is supported by many of the standard browsers. You can use it in your CSS code without updating HTML code.

<head>
<style>
p:first-child:first-letter{
float:left;
font-size:400%;
margin-top:7px;
margin-right:5px;
color:#992E00;
}
 
</style>
</head>
<body>
<p>Rahul Dravid makes history by coaching U19 Cricket player. Under his guidance, U19 players won the world cup. India has won the world cup four times which is more than any other cricket playing country in the world. It is all about the teamwork and effort made by their coach, Rahul Dravid. Well done, India!!</p>
</body>

Instead of writing inline CSS code I would recommend writing your own CSS file and add it in your HTML file.

I prefer this method. With this method, you just need to update a single CSS file, no matter how many web pages do you have on your website.

Tips for setting Drop-Cap:

  • Before making changes to your website, you should test your design- which looks better, cozy, color combination and easy to read using online HTML editor.
  • We have tested this code on Google Chrome and Mozilla Firefox browsers, it is working fine. You should test your code on all the standard desktop and mobile browsers before committing your code changes.
  • In the above example, we have embedded CSS code in HTML file. You can write CSS and HTML in a separate file.

Some points to remember while applying a drop cap to your content.

When you should not use Drop-Cap…

  • if your content is right aligned
  • when you have only one or two lines in your first paragraph

If you have less number of lines than the depth of the drop cap letter, it does not look so rosy.

You can also use a symbol as a drop cap initial letter.

Any difficulty to create drop cap using CSS and HTML? Let me know in the comment.

Python Interview Questions eBook

HTML
Aniruddha Chaudhari
I am complete Python Nut, love Linux and vim as an editor. I hold a Master of Computer Science from NIT Trichy. I dabble in C/C++, Java too. I keep sharing my coding knowledge and my own experience on CSEstack.org portal.

Your name can also be listed here. Got a tip? Submit it here to become an CSEstack author.

Comments

  • Reply
    Rusk
    February 17, 2020 at 5:36 pm

    Thanks for sharing this automatic way of doing. I copied your code to my blog. After some tweaks, it is working.

    • Reply
      Aniruddha Chaudhari
      February 17, 2020 at 6:24 pm

      You’re welcome, Rusk! Happy Blogging!

Leave a Reply Cancel reply

HTML CSS & JavaScript

  • HTML- First Program
  • HTML- Basic Tags
  • HTML- Adding CSS
  • HTML- Best Form Design Practices
  • HTML- Text Indent using CSS
  • HTML- Drop Cap using CSS
  • HTML- Add Favicon
  • HTML- Adding ToC on Website
  • HTML- Save Page as PDF
  • CSS- 17 Tips for Optimizing CSS
  • CSS- Adding Image Shadow
  • Show/Hide Password on Login Form
  • Pass Data to Another Web Page [JS]
  • Horizontal Scrolling on Mobile Web

HTML Editing Tools

  • HTML- Online Editor
  • HTML- Novi Builder

© 2022 – CSEstack.org. All Rights Reserved.

  • Home
  • Subscribe
  • Contribute Us
    • Share Your Interview Experience
  • Contact Us
  • About
    • About CSEstack
    • Campus Ambassador
  • Forum & Discus
  • Tools for Geek
  • LeaderBoard