How to select the first letter or text of an article with CSS

 Maybe you have seen that the first letter of some articles is very big or uses different fonts, and some are presented in different colors. For these effects, you must find a way to select the first letter first, but if every article requires It’s too much trouble to select and modify the first letter . CSS has a first-letter property specifically to deal with this problem. After CSS has a way to select the first letter for us, we only need to change After the article is published, there will be special effects for the first letter automatically!

CSS example of editing after selecting the first letter of the article

<style type="text/css">
<!--
p:first-letter{
color:gray;　//Set the text to gray
font-size:23px;
font-weight:bold;　//Set the text to bold Body
}
#DIV1{
font-size:13px;
}
#DIV1:first-letter{
color:blue;　//Set the text to blue
font-size:23px;
font-weight:bold;
}
-->
</style >
<p>This is a test string.</p>
<div id="DIV1">This is a test text in a DIV block</div>

The actual effect of the example

This is a test string.

This is a test text in a DIV block

We have prepared two different blocks in the example. The first block is the <p> tag of the paragraph, and the second block is the DIV block . Both use the first-letter property of CSS to select the first one. The word is the first letter of English, while Chinese is the first word to choose. CSS has a way to correctly judge the difference between Chinese and English, which is really convenient! After the first-letter attribute is selected, we can modify various text styles, including color, size, font... etc. It is very practical.

There are many functions that can modify the text.

• CSS font-family font
• CSS font-size text size
• CSS font-style property
• CSS font-weight sets the font weight