Text alignment in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to align the text to the center.

CSS

p {
  text-align: [1];
}

Drag options to blanks, or click blank then click option'

Acenter

Bleft

Cright

Djustify

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'left' or 'right' instead of 'center' will align text to the sides.

Forgetting the semicolon after the value.

The text-align property controls horizontal alignment of text. Using center centers the text inside its container.

2fill in blank

medium

Complete the code to align the heading text to the right.

CSS

h1 {
  text-align: [1];
}

Drag options to blanks, or click blank then click option'

Acenter

Bright

Cjustify

Dleft

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'left' or 'center' instead of 'right'.

Misspelling the property name.

The text-align property with value right moves the text to the right side of its container.

3fill in blank

hard

Fix the error in the code to justify the paragraph text.

CSS

p {
  text-align: [1];
}

Drag options to blanks, or click blank then click option'

Ajustify

Bcenter

Cleft

Dright

Attempts:

3 left

💡 Hint

Common Mistakes

Missing semicolon after the value.

Using invalid values like 'justified'.

The text-align property needs a value and a semicolon. The value justify spreads text evenly across the line width.

4fill in blank

hard

Fill both blanks to align the heading text to the left and set its color to blue.

CSS

h2 {
  text-align: [1];
  color: [2];
}

Drag options to blanks, or click blank then click option'

Aleft

Bright

Cblue

Dred

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping color and alignment values.

Using invalid color names.

The text-align property with left aligns text to the left. The color property with blue changes the text color to blue.

5fill in blank

hard

Fill all three blanks to align the paragraph text to the center, set font size to 1.5rem, and color to dark gray.

CSS

p {
  text-align: [1];
  font-size: [2];
  color: [3];
}

Drag options to blanks, or click blank then click option'

Aleft

B1.5rem

C#333333

Dcenter

Attempts:

3 left

💡 Hint

Common Mistakes

Using pixel units instead of rem for font size.

Using color names instead of hex codes.

Mixing up the order of properties.

text-align: center; centers the text horizontally. font-size: 1.5rem; sets the font size relative to root font size. color: #333333; sets a dark gray color for the text.

Practice

1. What does the CSS property text-align: center; do to the text inside an element?

easy

A. Aligns the text to the left edge of the container

B. Centers the text horizontally within its container

C. Aligns the text to the right edge of the container

D. Justifies the text so both edges are aligned

Solution

1. Step 1: Understand the text-align property

   This property controls horizontal alignment of inline content inside a block container.

2. Step 2: Interpret the value center

   The value center places the text in the middle horizontally.

3. Final Answer:

   Centers the text horizontally within its container -> Option B

4. Quick Check:

   text-align: center = centered text [OK]

Hint: Center text with text-align: center; [OK]

Common Mistakes:

• Confusing center with justify
• Thinking it aligns text vertically
• Mixing up left and right alignment

2. Which of the following is the correct CSS syntax to align text to the right inside a paragraph?

easy

A. p { text-align = right; }

B. p { align-text: right; }

C. p { text-align: right; }

D. p { text-align-right: true; }

Solution

1. Step 1: Recall correct CSS property syntax

   CSS uses property: value; pairs inside curly braces for selectors.

2. Step 2: Identify correct property and value

   text-align is the property, and right is the value. The syntax uses a colon and semicolon.

3. Final Answer:

   p { text-align: right; } -> Option C

4. Quick Check:

   Correct CSS syntax uses colon and semicolon [OK]

Hint: Use colon : not equals = for CSS properties [OK]

Common Mistakes:

• Using = instead of :
• Wrong property name like align-text
• Missing semicolon at end

3. Given the CSS below, how will the text inside the <div> appear?

div {
  text-align: justify;
  width: 300px;
}

medium

A. Text lines will stretch to fill the width, aligning both left and right edges

B. Text will be centered horizontally inside the div

C. Text will align only to the left edge

D. Text will align only to the right edge

Solution

1. Step 1: Understand text-align: justify;

   This value stretches each line so the text aligns evenly on both left and right edges.

2. Step 2: Consider container width

   The fixed width of 300px means text lines will expand or contract to fill that width fully.

3. Final Answer:

   Text lines will stretch to fill the width, aligning both left and right edges -> Option A

4. Quick Check:

   justify aligns text edges both sides [OK]

Hint: Justify aligns text edges left and right [OK]

Common Mistakes:

• Thinking justify centers text
• Confusing justify with right alignment
• Ignoring container width effect

4. Identify the error in this CSS snippet that aims to center text inside a header:

header {
  text-align center;
}

medium

A. Missing semicolon after property name

B. Incorrect property name, should be text-center

C. Value should be uppercase CENTER

D. Missing colon between property and value

Solution

1. Step 1: Check CSS property syntax

   CSS requires a colon ':' between property and value.

2. Step 2: Locate missing colon

   The snippet has text-align center; missing the colon after text-align.

3. Final Answer:

   Missing colon between property and value -> Option D

4. Quick Check:

   Property and value must be separated by colon [OK]

Hint: Always use colon : between property and value [OK]

Common Mistakes:

• Omitting colon
• Using wrong property name
• Confusing semicolon placement

5. You want to align text inside a <section> so that the first line is centered, but all other lines are left aligned. Which CSS approach achieves this?

hard

A. Use text-align: left; on the section and text-align: center; on the first line with ::first-line pseudo-element

B. Use text-align: center; on the section and text-align: left; on a <p> inside

C. Use text-align: center; on the section and text-indent for the first line

D. Use text-align: center; on the section and text-align: left; on the ::first-line pseudo-element

Solution

1. Step 1: Understand ::first-line pseudo-element

   This targets only the first line of text inside an element for styling.

2. Step 2: Apply alignment logic

   Set the whole section text to left aligned, then override the first line to center using ::first-line.

3. Step 3: Verify option correctness

   Use text-align: left; on the section and text-align: center; on the first line with ::first-line pseudo-element correctly applies text-align: center; to the first line and left alignment to the rest.

4. Final Answer:

   Use text-align: left; on the section and text-align: center; on the first line with ::first-line pseudo-element -> Option A

5. Quick Check:

   Use ::first-line to style first line separately [OK]

Hint: Use ::first-line to style first line differently [OK]

Common Mistakes:

• Trying to set first line alignment on container only
• Using text-indent instead of alignment
• Applying conflicting styles on same element