Lesson 20: Creating Drop Cap and First Line Styling in CSS

❮ Previous Lesson Next Lesson ❯

We can create drop cap for a paragraph in CSS using the pseudo element first-letter. A drop cap is a large capital letter at the beginning of a paragraph. Besides,we can also create CSS styles for the first line of a paragraph using the pseudo element first-line.

20.1 Creating Drop Cap

We use the first-letter pseudo element to create a drop cap of a block of text, normally the first letter of a paragraph. the syntax is illustrated as follows:

<strong> p::first-letter{font-size:20px; color:blue}</strong>

The code above will create drop cap for every paragraph, as illustrated in Example 20.1

Example 20.1

<!DOCTYPE html>
<html>
<head>
<title>Drop Cap</title>
<style type="text/css">p::first-letter{font-size: 40px;color:red;float:top}
</style>
</head>
<body>
<p>We can create drop cap for a paragraph in CSS using the pseudo element first-letter. A drop cap is a large capital letter at the beginning of a paragraph. Besides,we can also create CSS styles for the first line of a paragraph using the pseudo element first-line.</p>
<p>We use the first-letter pseudo element to create a drop cap of a block of text, normally the first letter of a paragraph. The syntax is illustrated as follows:</p>
</body>
</html>

The output

We can create drop cap for a paragraph in CSS using the pseudo element first-letter. A drop cap is a large capital letter at the beginning of a paragraph. Besides, we can also create CSS styles for the first line of a paragraph using the pseudo element first-line.

We use the first-letter pseudo element to create a drop cap of a block of text, normally the first letter of a paragraph. The syntax is illustrated as follows:

To avoid creating a drop cap for every single paragraph, we can use class attribute to specify only a certain text block will have a drop cap, as illustrated in Example 20.2

Example 20.2

<!DOCTYPE html>
<html>
<head>
<title>Drop Cap</title>
<style type="text/css">

P.Fletter:first-letter{font-size: 40px; color:blue;float;top;}

</style>

</head>
<body>

<p class="Fletter">We can create drop cap for a paragraph in CSS using the pseudo element first-letter. A drop cap is a large capital letter at the beginning of a paragraph. Besides,we can also create CSS styles for the first line of a paragraph using the pseudo element first-line..</p>
<p>We use the first-letter pseudo element to create a drop cap of a block of text, normally the first letter of a paragraph. the syntax is illustrated as follows:</p>
</body>

</html>

The Output

We use the first-letter pseudo element to create a drop cap of a block of text, normally the first letter of a paragraph. the syntax is illustrated as follows:

20.2 Creating Style for First Line

We can create CSS style for the first line of a block of text using the first-line pseudo element. The syntax is as follows:

p::first-line{font-weight:bold, color:blue;}

p.Fline:first-line{font-weight:bold, color:blue;}

Example 20.3


<!DOCTYPE html>
<html>
<head>
<title>First Line Styling</title>
<style type="text/css">

P.Fline:first-line{text-decoration:underline;font-weight:bold;color:blue;}
</style>

</head>
<body>
<p class="Fline">We can create drop cap for a paragraph in CSS using the pseudo element first-letter. A drop cap is a large capital letter at the beginning of a paragraph. Besides,we can also create CSS styles for the first line of a paragraph using the pseudo element first-line..</p>

</body>

</html>

The Output

❮ Previous Lesson Next Lesson ❯