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.
