CSS Text Practice Questions with Solutions

Introduction

CSS text properties help you control the appearance of text on a webpage. You can change the text color, alignment, decoration, transformation, spacing, and more. These properties improve readability and make your content look professional. In this chapter, you’ll practice CSS text properties through simple solved questions that are easy for beginners to understand. CSS Text Practice questions with solutions help to understand the concepts.

Question 1: Change the Text Color

Problem Statement

Write CSS to change the text color of all paragraphs to blue.

CSS Code

p {
    color: blue;
}

Output

All paragraph text appears in blue.

Explanation

• color changes the text color.
• blue is a predefined CSS color name.
• This property affects only the text, not the background.

Question 2: Center the Text

Problem Statement

Write CSS to center-align the text inside an <h1> element.

CSS Code

h1 {
    text-align: center;
}

Output

The <h1> text appears centered.

Explanation

• text-align controls the horizontal alignment of text.
• center places the text in the middle of the element.
• It is commonly used for headings and titles.

Question 3: Underline the Text

Problem Statement

Write CSS to underline all <h2> headings.

CSS Code

h2 {
    text-decoration: underline;
}

Output

All <h2> headings display an underline.

Explanation

• text-decoration adds decorative lines to text.
• underline draws a line below the text.
• It is often used to highlight important text.

Question 4: Display Text in Uppercase

Problem Statement

Write CSS to display all paragraph text in uppercase.

CSS Code

p {
    text-transform: uppercase;
}

Output

All paragraph text appears in UPPERCASE.

Explanation

• text-transform changes the appearance of letters.
• uppercase converts all letters to capital letters.
• The original HTML text remains unchanged.

Question 5: Increase the Space Between Letters

Problem Statement

Write CSS to add 3px spacing between the letters of an <h1> element.

CSS Code

h1 {
    letter-spacing: 3px;
}

Output

The letters in the <h1> heading appear with 3px spacing between them.

Explanation

• letter-spacing controls the space between characters.
• Larger spacing makes headings stand out.
• It is commonly used in logos and page titles.

Question 6: Increase the Space Between Words

Problem Statement

Write CSS to add 10px spacing between the words of a paragraph.

CSS Code

p {
    word-spacing: 10px;
}

Output

The words in the paragraph display with 10px space between them.

Explanation

• word-spacing controls the space between words.
• 10px increases the gap between each word.
• This property can improve readability in some designs.

Question 7: Indent the First Line of a Paragraph

Problem Statement

Write CSS to indent the first line of every paragraph by 40px.

CSS Code

p {
    text-indent: 40px;
}

Output

The first line of every paragraph starts 40px away from the left side.

Explanation

• text-indent adds space before the first line of text.
• It affects only the first line of the paragraph.
• This style is commonly used in books and articles.

Question 8: Increase the Line Height

Problem Statement

Write CSS to set the line height of a paragraph to 2.

CSS Code

p {
    line-height: 2;
}

Output

The space between each line of the paragraph increases, making the text easier to read.

Explanation

• line-height controls the vertical spacing between lines of text.
• A value of 2 means each line is twice the font size.
• Proper line spacing improves readability.

Question 9: Add a Shadow to Text

Problem Statement

Write CSS to add a gray shadow to an <h1> heading.

CSS Code

h1 {
    text-shadow: 2px 2px 4px gray;
}

Output

The <h1> heading displays a gray shadow behind the text.

Explanation

• text-shadow adds a shadow effect to text.
• The values represent:
  • 2px → Horizontal shadow position
  • 2px → Vertical shadow position
  • 4px → Blur radius
  • gray → Shadow color
• Text shadows are often used for headings and banners.

Question 10: Remove the Underline from Links

Problem Statement

Write CSS to remove the underline from all hyperlinks.

CSS Code

a {
    text-decoration: none;
}

Output

All hyperlinks appear without an underline.

Explanation

• text-decoration: none; removes the default underline.
• It is commonly used when creating custom navigation menus.
• You can add other styles such as colors or hover effects for better user experience.

Key Takeaways

• color changes the text color.
• text-align controls text alignment.
• text-decoration adds or removes decorations like underlines.
• text-transform changes the letter case.
• letter-spacing and word-spacing control spacing between letters and words.
• text-indent indents the first line of a paragraph.
• line-height improves readability by adjusting the space between lines.
• text-shadow adds visual effects to text.

Frequently Asked Questions (FAQs)

1. What is the CSS color property?

The color property changes the color of text inside an HTML element.

2. What does text-align do?

The text-align property controls the horizontal alignment of text, such as left, center, right, or justify.

3. How can I remove the underline from a link?

Use the following CSS:

a {
    text-decoration: none;
}

This removes the default underline from hyperlinks.

4. What is the purpose of text-transform?

The text-transform property changes the letter case of text, such as uppercase, lowercase, or capitalize.

5. What is the difference between letter-spacing and word-spacing?

letter-spacing changes the space between individual letters, while word-spacing changes the space between words.

6. Why is line-height important?

line-height increases the space between lines of text, making paragraphs easier to read.

7. What is text-shadow used for?

text-shadow adds a shadow effect behind text to improve its appearance and make headings stand out.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Rishabh Kumar