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