Open In App

How to design initial letter of text paragraph using CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

Sometimes a webpage contains good contents for reading but the styling of the texts looks simple and straight, so it becomes boring for the readers to read it, and they leave the webpage. But when they read story books, they read them fully because of the good visuals in that book, so they complete the reading of book. So what to do to enhance the visuals and styling of the texts in the webpage.

This article will tell you how to create a story book like effect in a webpage by using HTML and CSS only.

Before the code, you just need to include the following stylesheet in your program for font-family : Cormorant Infant

<link href=”https://fonts.googleapis.com/css2?family=Cormorant+Infant&display=swap” rel=”stylesheet”>

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>GeeksforGeeks</title>
    <link href=
        rel="stylesheet">
  
    <style type="text/css">
        p.para1:first-letter {
            font-size: 100px;
            display: block;
            float: left;
            line-height: 0.5;
            margin: 15px 15px 10px 0;
        }
          
        body {
            font-size: 1rem;
            width: 40%;
            margin: auto;
            font-family: cormorant infant;
        }
    </style>
</head>
  
<body>
    <p class="para1">
        GeeksforGeeks is my favourite site where 
        I can gain a lot of knowledge and can 
        also share my knowledge what i have 
        gained while learning. We can add more 
        paragraphs for content. This is just an 
        example to tell how to create a story 
        book like effect. More paragraphs, 
        content just for showing its best effect. 
        Some more paragraphs needed. Just some 
        more. Now you can see it.
    </p>
  
    <p>
        This article tells about how to create 
        a story book like effect in a webpage 
        just using CSS. We can add more 
        paragraphs as required.
    </p>
  
    <p>Some more paragraphs can be included....</p>
</body>
  
</html>



Output:

Now, as you can see in the output, we have created a beautiful story-book like effect, which will attract readers to read the contents on the webpage.



Last Updated : 01 Feb, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads