10 Jul CSS Text Properties

Content is what adds value to your website and helps you in reaching your SEO goals. With CSS Text properties, you can style the text.

Let’s learn about the CSS text properties with examples and screenshots,

Add Color to Text

Add text color in the form of color name (orange), hex value (#FFA500), or RGB value (255, 165, 0).

Here’s an example,

Here’s the output,

 

Above we saw how to set the text color on a web page. Color can be set in three forms,

---

Also Read: Set Colors in CSS

---

Now, we will learn how to align text in CSS.

CSS text-align Property (Text Alignment)

The text-align property is used to align text. Align your text as left, right, center, aligned, or justified.

Let’s see them one by one herein the below example:

Here’s the output,

CSS text-transform property (Transformation – Change case)

To transform text on a web page, use the text-transform property. Set your text to capitalize or change it to uppercase or lowercase. Capitalize will capitalize the first letter of each word.

Let us now see some examples to change case on a web page:

Here’s the output,

CSS text-shadow property (Add Shadow to Text)

The shadow of any text on your website can be easily set with the text-shadow property. Let’s set the property of headings <h1>, <h2> , and add shadow to the text:

Here’s the output,

CSS line-height property (Add Space between Lines)

If you want to specify space between lines, then go with the line-height property. Here’s an example in which we will provide space between lines for text written under <p> element.

Here’s the output,

As you can see above, we have gone with line-height: 3.0 and line-height: 1.9 to demonstrate the difference between line heights. The higher value will have more space between the lines.

CSS letter-spacing Property (Set Spacing)

If you want to set the spacing between characters in a word, then go with the letter-spacing property. Let us see an example wherein we will set spacing between characters:

Here’s the output,

As you can see above, we used letter-spacing: -4px  for <h1> and letter-spacing: 2px for <h2>. Note that the negative value is to decrease the space between letters, as you can see in the text STUDYOPEDIA above.

Also, the positive value is to increase the space between letters, as you can see in the text Tutorials On Programming above.

We discussed CSS Text Properties such as text-shadow, text-transform, line-height, letter-spacing, etc. Try them to make the content more attractive.