CSS Text
By Tony 8.3.2024
Although CSS text sounds the same as CSS font, and they both apply styling to text, they are different. CSS font focuses on the letters of the text, and CSS text focuses on the text as a whole and apply styling to it. Below, we'll explore some of the common CSS text properties.
text-align: center;
text-decoration: underline dotted;
text-shadow: 0px 0px 5px black;
line-height: 30px;
letter-spacing: 5px;
The first text property, text-align, is straightforward: it aligns the text to the left, center, or right. The second property, text-decoration, adds decoration to the text. You can make the text overline, line-through, or underline with the first value. The second value sets the line style like solid, dashed, dotted, and wavy. The text-shadow property adds a blurred shadow behind the text as if the text was floating. The first two values (0px 0px in this case) sets the position of the shadow, with the first being the X position and the second the Y position. The third value (5px) is how wide, or how blurred, the shadow blur is spreading out. The last value (black) sets the color of the text shadow. The next property, line-height, sets how much vertical space is in between each line of text. The final letter-spacing property sets how far apart each letter in the text is. Experiment with the values below to see how they work!
As you can see, with the new properties applied to the <p> tag, the text is now centered, has a dotted underline, has a custom line height and letter spacing, with a faint black shadow in the background. With the powerful CSS text, you can apply so much customization on your text and make them more readable and visually appealing. Have fun utilizing these properties!