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

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:
p::first-letter{font-size:20px; color:blue}
The code above will create drop cap for every paragraph, as illustrated in Example 20.1

Example 20.1

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:

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

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:



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:

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;}

or

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

Example 20.3

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..

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.