Bird
Raised Fist0
CSSmarkup~30 mins

Text alignment in CSS - Mini Project: Build & Apply

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Text Alignment with CSS
📖 Scenario: You are creating a simple webpage for a local bakery. The bakery wants the text on their homepage to look neat and organized. They want the main heading to be centered, the introduction paragraph to be left-aligned, and the contact information to be right-aligned.
🎯 Goal: Build a webpage with three text sections: a centered heading, a left-aligned paragraph, and a right-aligned contact info line using CSS text alignment.
📋 What You'll Learn
Use semantic HTML5 elements:
,
, and
.
Center the heading text inside the
.
Left-align the paragraph text inside the
.
Right-align the contact information inside the
.
Use CSS classes to apply text alignment styles.
Ensure the page is responsive and text remains aligned on different screen sizes.
💡 Why This Matters
🌍 Real World
Text alignment is a basic but essential skill for creating readable and visually appealing webpages. Businesses often want their headings, paragraphs, and contact info aligned differently to guide visitor attention.
💼 Career
Web developers must know how to use CSS text alignment to meet design requirements and improve user experience on websites.
Progress0 / 4 steps
1
Create the HTML structure with text content
Write the HTML code to create a <header> with a <h1> containing the text "Welcome to Sweet Treats Bakery", a <main> with a <p> containing the text "Freshly baked goods every day.", and a <footer> with a <p> containing the text "Contact us: 123-456-7890".
CSS
Hint

Use semantic tags and place the exact text inside the correct tags.

2
Add CSS classes for text alignment
Add a class called center-text to the <h1>, a class called left-text to the <p> inside <main>, and a class called right-text to the <p> inside <footer>.
CSS
Hint

Add the class attribute exactly as shown to each text element.

3
Write CSS rules for text alignment
Write CSS rules for the classes center-text, left-text, and right-text to set their text-align properties to center, left, and right respectively.
CSS
Hint

Use the CSS property text-align inside each class rule.

4
Add responsive meta tag and final HTML structure
Add the <!DOCTYPE html> declaration at the top, wrap the content inside <html lang="en"> and <body> tags, and add the responsive meta tag <meta name="viewport" content="width=device-width, initial-scale=1.0"> inside the <head> section.
CSS
Hint

Make sure to add the doctype, html, head, and body tags properly with the viewport meta tag for responsiveness.

Practice

(1/5)
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