Hurry! Try our new Interactive Courses for FREE. 🥳   🚀

CSS initial-letter Property

The initial-letter property in CSS is known for setting the styling for dropped, sunken, or raised initial letters.

This property may be specified as one of the keywords like none, number, or integer. The normal or number keyword is followed by an integer. The normal value asserts no special initial-letter effect.

The number value defines the size of the initial letter, in terms of how many lines it occupies. An integer value defines the number of lines the initial letter must sink when its size is specified.

Syntax

normal | [ <number> <integer>? ]

Example: CSS initial-letter Property

In the example here, we are using the initial letter property to design our text according to the values of this property. In this case, we have given the values as normal, 1.5, and 3.0. Hence, the initial letter in all three cases gets differently designed. In the first case, the initial letter is normal, while in the second case, the initial letter uses 1.5 lines, and in the third one it uses up 3 lines.

<!DOCTYPE html>
<html>
<head>
	<title>The initial-letter property in CSS</title>
	<style type="text/css">
		.normal {
		  -webkit-initial-letter: normal;
		  initial-letter: normal;
		  color: red;
		}		
		.onefive {
		  -webkit-initial-letter: 1.5;
		  initial-letter: 1.5;
		  color: green;
		}		
		.three {
		  -webkit-initial-letter: 3.0;
		  initial-letter: 3.0;
		  color: deeppink;
		}
	</style>
</head>
<body>
	<p class="normal">Initial letter is normal</p>
	<p class="onefive">Initial letter occupies 1.5 lines</p>
	<p class="three">Initial letter occupies 3 lines</p>
</body>
</html>

Output

Example 2: CSS initial-letter Property

In this second example, we have given the initial letter property value as 3.0 for all the sentences. Hence, in all the sentences, the initial letter gets designed by using up 3 lines.

<!DOCTYPE html>
<html>
<head>
	<title>The initial-letter property in CSS</title>
	<style type="text/css">
		.normal {
		  -webkit-initial-letter: 3.0;
		  initial-letter: 3.0;
		  color: red;
		}		
		.onefive {
		  -webkit-initial-letter: 3.0 2;
		  initial-letter: 3.0 2;
		  color: green;
		}		
		.three {
		  -webkit-initial-letter: inherit;
		  initial-letter: inherit;
		  color: deeppink;
		}
	</style>
</head>
<body>
	<p class="normal">Study Tonight</p>
	<p class="onefive">Is the best place to learn digital courses</p>
	<p class="three">in a simplified way</p>
</body>
</html>

Output

Live Example

Here in this live example, you can easily test the live coding and execute the example using different values or edit the coding and create your own example.

Browser Compatibility

The term 'browser compatibility' indicates the ability of a particular website to appear fully functional on several browsers, available in the market. This means that the HTML coding of the website and the scripts on that website must be compatible to run on the browsers. It is of immense importance today when there is a large variety of web browsers available.

Name of Browser Background size contain and cover

Chrome

no

no

Edge

no

no

Firefox

no

no

Internet Explorer

no

no

Opera

no

no

Safari

9

9

Webview Android

no

no

Chrome Android

no

no

Firefox Android

no

no

Opera Android

no

no

IOS Safari

9

9

Samsung Internet

no

no

Conclusion

The initial value for the initial-letter property in CSS is normal. This property is applicable to the ":first-letter" pseudo-elements and the inline-level first child of a block container. It is not an inherited property. The computed value for this property is the as specified one. The animation type for this property is discrete.