CSS Text Properties

CSS Text Properties

Content is what adds values 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,

 CSS Text Properties Color

Above we saw how to set text color. 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 here.

Here’s the output,

CSS Text Alignment

CSS text-transform property (Transformation – Change case)

Here, we will see how to transform text using text-transform property. You can set your text to capitalize, or change it to uppercase or lowercase.

Capitalize will capitalize the first letter of each word.

Here’s the output,

CSS Text Transform property

CSS text-shadow property (Add Shadow to Text)

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

Here’s the output,

CSS Text Shadow Property

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,

CSS Line Height

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 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.

Here’s the output,

CSS Text Spacing property

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 Propertites such as  text-shadow, text-transform, line-height, letter-spacing, etc. Try them to make the content more attractive.

CSS Box Model
CSS Fonts
Studyopedia Editorial Staff
Studyopedia Editorial Staff
[email protected]

We work to create free tutorials for all.

No Comments

Post A Comment