CSS first-letter property

 The CSS first-letter property is a CSS selector (Selector), also known as a virtual element or pseudo-element. It can be used to control the initial letter of a paragraph of an article. Through CSS first-letter, you can easily select a single paragraph or the entire paragraph. For each initial letter of the paragraph, we can then style these initial letters to beautify the results presented.

CSS first-letter basic example

<style type="text/css">
<!--
p:first-letter{
　color:red;
　font-size:20px;
　font-weight:bold;
}
-->
</style>
<p>Good morning. </p>

The results above output: G OOD Morning

paradigm used in first-letter to select the first letter, then we can easily do some of the letters styles, color: red is the color of the text to red, font- size:20px is to set the text size to 20px, and font-weight:bold is to set the text to bold. This setting can be completed at one time, mainly due to the first-letter locking function, since first-letter is so It's easy to use, let's apply it to each paragraph of the entire article, just by selecting the CSS category.

Control the beginning letters of the paragraphs of the entire article at once through CSS categories

<style type="text/css">
<!--
p.T1:first-letter{
　color:red;
　font-size:20px;
　font-weight:bold;
}
-->
</style>
<p class= "T1">Good morning.</p>
<p class="T1">Hello World.</p>

The above output results such as



p.T1.first-letter used in the CSS grammar. The first letter of each paragraph of the category T1 is automatically selected and then styled. This application method is very long for the article. It can save a lot of management time, and there is no need to reset the letter style at the beginning of each paragraph. This is the feature and advantage of CSS first-letter.