Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to design initial letter of text paragraph using CSS?
We have seen in various chapters of many books guiding on how to design the first letter of word using CSS. In CSS we can use the ::first-letter pseudo-element to design the first initial letter of a text paragraph. This allows us to apply particular styles to the initial letter of the first line of a block-level element. For example, we may make the initial letter larger, a different font, or a different color from the rest of the text.
Syntax
p::first-letter{
property_name : value_name;
}
first-letter − The first letter is defined as the pseudo-element which is used to design the first letter of a paragraph.
Properties used
The following properties used in the example are −
font-style − Define the style of the text.
color − Define the color of the text.
text-align − Define the horizontal alignment of the text.
font-size − Define the size of the text.
Example
In this example, we will use the properties of internal CSS to design the initial letter of the text paragraph. The p element will create the paragraph in HTML. The topic name of the paragraph will be mentioned by using the h1 element and setting the properties by font-style, color, and text style. To design the initial letter in the paragraph it will use the pseudo element i.e p::first-letter. This pseudo element creates the larger size of the first letter by using the properties of font-size and color.
<!DOCTYPE html>
<html>
<title>Design initial letter of text paragraph</title>
<head>
<style>
h1{
font-style: italic;
color: darkblue;
text-align: center;
}
p{
font-size: 20px;
}
p::first-letter{
font-size: 80px;
color: #FF0000;
}
p.new_style:first-letter {
font-size: 100px;
display: block;
float: left;
line-height: 0.5;
margin: 15px 15px 10px 0;
color: blue;
}
h3{
color: darkgreen;
font-style: italic;
}
</style>
</head>
<body>
<h1>The story of Anne Frank</h1>
<p><i>
Anne Frank was born on June 12, 1929, in Frankfurt am Main, Germany. Edith
and Otto Frank were her parents. Anne spent her first five years of life in
a flat on the outskirts of Frankfurt with her parents and older sister,
Margot. Otto Frank moved to Amsterdam in the Netherlands, where he had
links in the business world, after the Nazis took over in 1933. The
remainder of the Frank family arrived shortly after, with Anne arriving
last in February 1934 after spending time with her grandparents in
Aachen.</i></p>
<h2>One more new format style of first letter</h2>
<p class="new_style"> Anne Frank was born on June 12, 1929, in Frankfurt
am Main, Germany. Edith and Otto Frank were her parents. Anne spent her
first five years of life in a flat on the outskirts of Frankfurt with her
parents and older sister, Margot. Otto Frank moved to Amsterdam in the
Netherlands, where he had links in the business world, after the Nazis took
over in 1933. The remainder of the Frank family arrived shortly after, with
Anne arriving last in February 1934 after spending time with her
grandparents in Aachen.<p>
<h3>@tutorialspoint.com</h3>
</body>
</html>
Conclusion
We saw how we used the style of the first letter of a text paragraph. The ::first-letter is called a pseudo-element, we made the first letter stand out by using several styles, such as a larger font size, a different font, or a different color. Therefore, this way we design the initial letter of text paragraph using CSS.
1K+ Views
