How to design initial letter of text paragraph using CSS ?
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
Share your thoughts in the comments
Please Login to comment...