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="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; 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.
Please Login to comment...