Home Tutorials Videos Q&A MCQ Shortcuts Exercises Appointment Login

CSS Text

CSS Text properties are used to style the appearance of text on a webpage. They help improve readability, alignment, spacing, and overall design.

1. Introduction to CSS Text

CSS provides many text properties that allow you to change the color, alignment, decoration, spacing, transformation, and shadow effects of text.

Common CSS Text Properties
  • color
  • text-align
  • text-decoration
  • text-transform
  • text-indent
  • letter-spacing
  • line-height
  • word-spacing
  • text-shadow

p{

    color:blue;

    text-align:center;

}
CSS Text properties make web pages more attractive and easier to read.

2. color Property

The color property changes the color of text. 


h1{

    color:red;

}
Different Ways to Specify Colors
Method Example
Color Name red
Hex Code #ff0000
RGB rgb(255,0,0)
RGBA rgba(255,0,0,0.5)
Choose colors that provide good contrast for better readability.

3. text-align Property

The text-align property specifies the horizontal alignment of text. 


p{

    text-align:center;

}
Value Description
left Aligns text to the left.
center Centers the text.
right Aligns text to the right.
justify Aligns text evenly on both sides.
justify is commonly used for long paragraphs.

4. text-decoration Property

The text-decoration property adds or removes decorative lines from text. 


a{

    text-decoration:none;

}
Value Description
none Removes decoration.
underline Adds an underline.
overline Adds a line above the text.
line-through Draws a line through the text.
Removing the underline from links is a common web design practice.

5. text-transform Property

The text-transform property changes the capitalization of text. 


h2{

    text-transform:uppercase;

}
Value Description
uppercase Converts all letters to uppercase.
lowercase Converts all letters to lowercase.
capitalize Capitalizes the first letter of each word.
none Displays the original text. 

p{

    text-transform:capitalize;

}
The text-transform property changes only the display of text. It does not modify the original HTML content.

6. text-indent Property

The text-indent property specifies the indentation of the first line of a paragraph. 


p{

    text-indent:40px;

}
Value Description
20px Indents the first line by 20 pixels.
5% Indents relative to the parent element.
0 No indentation.
text-indent is commonly used in books, magazines, and long articles.

7. letter-spacing Property

The letter-spacing property controls the space between characters. 


h1{

    letter-spacing:3px;

}
Value Effect
0 Default spacing.
2px Increases spacing slightly.
5px Creates wide spacing.
-1px Reduces spacing. 

.logo{

    letter-spacing:5px;

}
Letter spacing is often used for headings, logos, and banners.

8. line-height Property

The line-height property specifies the vertical space between lines of text. 


p{

    line-height:1.8;

}
Value Description
1 Normal line spacing.
1.5 Comfortable reading.
2 Double line spacing.
Increasing line height improves readability, especially for long paragraphs.

9. word-spacing Property

The word-spacing property controls the space between words. 


p{

    word-spacing:10px;

}
Value Effect
normal Default spacing.
5px Adds moderate spacing.
10px Adds wider spacing.
-2px Reduces spacing between words.
Proper word spacing makes text easier to read.

10. text-shadow Property

The text-shadow property adds shadow effects to text. 


h1{

    text-shadow:2px 2px 5px gray;

}
Parameter Description
2px Horizontal shadow position.
2px Vertical shadow position.
5px Blur radius.
gray Shadow color. 

.title{

    text-shadow:3px 3px 8px black;

}
Use text-shadow carefully to enhance headings without reducing readability.

11. CSS Text Best Practices

Good text formatting improves readability, accessibility, and the overall appearance of a website.

  • Use readable font sizes for paragraphs.
  • Choose text colors with sufficient contrast.
  • Use appropriate line-height for comfortable reading.
  • Avoid excessive letter and word spacing.
  • Use text-align:justify; only for long paragraphs.
  • Use text-transform carefully to improve presentation.
  • Keep text-shadow subtle and easy to read.
  • Maintain consistent text styling across the website.
Proper text styling makes websites more professional and improves the user experience.

12. Common Text Styling Mistakes

Mistake Correct Practice
Using very bright text colors. Choose colors with good contrast.
Too much letter spacing. Keep spacing balanced.
Very small font size. Use readable font sizes.
Large text shadows. Apply subtle shadow effects.
Using uppercase for long paragraphs. Reserve uppercase for headings. 

❌ Incorrect

h1{

    letter-spacing:12px;

    text-shadow:8px 8px 10px red;

}

✔ Better

h1{

    letter-spacing:2px;

    text-shadow:2px 2px 4px gray;

}
Excessive text effects reduce readability and make websites look unprofessional.

13. Browser Support

CSS Text properties are fully supported by all modern web browsers.

Browser Support
Google Chrome ✔ Supported
Mozilla Firefox ✔ Supported
Microsoft Edge ✔ Supported
Safari ✔ Supported
Opera ✔ Supported
CSS text properties can be safely used in modern browsers.

14. CSS Text Interview Questions

  1. What are CSS text properties?
  2. What is the purpose of the color property?
  3. Explain the different values of text-align.
  4. What is the use of text-decoration?
  5. What does text-transform do?
  6. What is the purpose of line-height?
  7. What is the difference between letter-spacing and word-spacing?
  8. How does text-shadow work?
  9. Why is text readability important in web design?
  10. Which CSS property indents the first line of a paragraph?
These questions are commonly asked during HTML & CSS interviews and practical examinations.

15. Lesson Summary

In this lesson, you learned:
  • ✔ Introduction to CSS Text.
  • ✔ color Property.
  • ✔ text-align Property.
  • ✔ text-decoration Property.
  • ✔ text-transform Property.
  • ✔ text-indent Property.
  • ✔ letter-spacing Property.
  • ✔ line-height Property.
  • ✔ word-spacing Property.
  • ✔ text-shadow Property.
  • ✔ Best Practices and Common Mistakes.
Congratulations! You have successfully completed the CSS Text lesson. You can now style text using colors, alignment, spacing, decoration, transformation, and shadow effects to create attractive and readable web pages.

Quick Quiz

Which CSS property changes the horizontal alignment of text?





← Previous Next →