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.