Text Alignment and Styling

Share with a Friend

Introduction

HTML provides several tags and attributes to control the alignment and styling of text, making it visually appealing and well-structured. These features allow developers to enhance the readability and aesthetic of web pages.

1. Text Alignment

Text alignment is used to position text horizontally on the webpage. The alignment can be left, right, center, or justify.

Using the align Attribute (Deprecated)

In earlier versions of HTML, the align attribute was used to specify text alignment within certain tags like <p> and <div>. However, this method is now deprecated and should be avoided.

Syntax:

<p align="center">This is centered text.</p>
<p align="right">This is right-aligned text.</p>

Modern Approach: CSS text-align Property

For modern web design, use CSS to control text alignment.

Syntax:

<p style="text-align: center;">This is centered text.</p>
<p style="text-align: left;">This is left-aligned text.</p>
<p style="text-align: right;">This is right-aligned text.</p>
<p style="text-align: justify;">This is justified text.</p>

Example:

<p style="text-align: left;">HTML stands for HyperText Markup Language.</p>
<p style="text-align: center;">It is used to create web pages.</p>
<p style="text-align: right;">This text is aligned to the right.</p>
<p style="text-align: justify;">This paragraph is justified, meaning the text is evenly distributed across the width of the container.</p>

Alignment Options:

Text Styling

Text styling allows you to customize the appearance of text, including color, font, size, and more. These styles can be applied directly using the style attribute or through CSS.

Changing Text Color

<p style="color: blue;">This text is blue.</p>
<p style="color: #FF5733;">This text uses a hex color code.</p>
<p style="color: rgb(255, 0, 0);">This text is red using RGB values.</p>

Changing Font Size

<p style="font-size: 20px;">This text is 20 pixels.</p>
<p style="font-size: 1.5em;">This text is 1.5 times the default size.</p>

Changing Font Family

<p style="font-family: Arial, sans-serif;">This text is in Arial.</p>
<p style="font-family: 'Times New Roman', serif;">This text is in Times New Roman.</p>

Combining Multiple Styles

<p style="text-align: center; color: green; font-size: 18px; font-family: Verdana;">This text is styled with multiple properties.</p>

Inline vs. External Styling

Inline Styling:

<p style="text-align: left; color: blue;">This text is styled inline.</p>

External Styling:

<p class="centered-text">This text is styled externally.</p>

/* CSS File */
.centered-text {
  text-align: center;
  color: red;
}

Summary