Text Alignment

Part of the Styling with CSS section of Coddy's HTML journey — lesson 21 of 76.

In CSS, the text-align property is used to control the horizontal alignment of text within an HTML element.

Common values for text-align include:

left: Aligns the text to the left. This is the default alignment for most text.

right: Aligns the text to the right.
center: Centers the text horizontally within the element.

For example:

p {
    text-align: left;
}

h1 {
    text-align: center;
}

.right-align {
    text-align: right;
}

Challenge

Easy

You are given an HTML document with a heading (<h1>), a paragraph (<p>), and a division (<div>). Your task is to use the text-align property to style these elements. Follow the steps below:

Write a CSS rule that targets the <h1> element. Set the text-align to center.
Write a CSS rule that targets the <p> element. Set the text-align to right.
Write a CSS rule that targets the <div> element. Set the text-align to left.

Cheat sheet

The text-align property controls horizontal text alignment within an element.

Common values:

left: Aligns text to the left (default)
right: Aligns text to the right
center: Centers text horizontally

p {
    text-align: left;
}

h1 {
    text-align: center;
}

.right-align {
    text-align: right;
}

Try it yourself

<html>
<head>
    <title>Text Alignment</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading. </h1>
    <p>This is a paragraph.</p>
    <div>This is a division. </div>
</body>
</html>