How to design initial letter of text paragraph using CSS ?

Last Updated : 01 Feb, 2021

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=
"https://fonts.googleapis.com/css2?family=Cormorant+Infant&display=swap"
        rel="stylesheet">

    <style type="text/css">
        p.para1:first-letter {
            font-size: 100px;
            display: block