The Project | About Us | Contribute | Donations | License

HOME

In this lesson, we will explore how to control the alignment and spacing of text in CSS. Proper text alignment and spacing are crucial for creating visually appealing and readable web pages.

Key Concepts

Text Alignment:
- Aligning text horizontally within its container.
- Common properties: text-align.
Text Indentation:
- Adding space at the beginning of a paragraph.
- Property: text-indent.
Line Height:
- Controlling the space between lines of text.
- Property: line-height.
Letter Spacing:
- Adjusting the space between characters.
- Property: letter-spacing.
Word Spacing:
- Adjusting the space between words.
- Property: word-spacing.

Text Alignment

The text-align property is used to set the horizontal alignment of text within an element. It can take the following values:

left: Aligns text to the left.
right: Aligns text to the right.
center: Centers the text.
justify: Stretches the lines so that each line has equal width.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Alignment Example</title>
    <style>
        .left-align {
            text-align: left;
        }
        .right-align {
            text-align: right;
        }
        .center-align {
            text-align: center;
        }
        .justify-align {
            text-align: justify;
        }
    </style>
</head>
<body>
    <p class="left-align">This text is aligned to the left.</p>
    <p class="right-align">This text is aligned to the right.</p>
    <p class="center-align">This text is centered.</p>
    <p class="justify-align">This text is justified. It stretches the lines so that each line has equal width.</p>
</body>
</html>

Text Indentation

The text-indent property is used to specify the indentation of the first line of a paragraph.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Indentation Example</title>
    <style>
        .indented {
            text-indent: 50px;
        }
    </style>
</head>
<body>
    <p class="indented">This paragraph has an indentation of 50 pixels on the first line.</p>
</body>
</html>

Line Height

The line-height property is used to set the amount of space between lines of text. It can be specified in various units such as pixels, ems, or as a multiplier of the font size.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Line Height Example</title>
    <style>
        .line-height {
            line-height: 1.5;
        }
    </style>
</head>
<body>
    <p class="line-height">This paragraph has a line height of 1.5 times the font size, making the text more readable.</p>
</body>
</html>

Letter Spacing

The letter-spacing property is used to control the space between characters in a text.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Letter Spacing Example</title>
    <style>
        .letter-spacing {
            letter-spacing: 2px;
        }
    </style>
</head>
<body>
    <p class="letter-spacing">This text has a letter spacing of 2 pixels.</p>
</body>
</html>

Word Spacing

The word-spacing property is used to control the space between words in a text.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Word Spacing Example</title>
    <style>
        .word-spacing {
            word-spacing: 10px;
        }
    </style>
</head>
<body>
    <p class="word-spacing">This text has a word spacing of 10 pixels.</p>
</body>
</html>

Practical Exercise

Task

Create a simple HTML page with a paragraph of text. Apply the following styles to the paragraph:

Center-align the text.
Indent the first line by 30 pixels.
Set the line height to 1.8.
Increase the letter spacing by 1.5 pixels.
Increase the word spacing by 5 pixels.

Solution

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Styling Exercise</title>
    <style>
        .styled-text {
            text-align: center;
            text-indent: 30px;
            line-height: 1.8;
            letter-spacing: 1.5px;
            word-spacing: 5px;
        }
    </style>
</head>
<body>
    <p class="styled-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum. Cras venenatis euismod malesuada. Nulla facilisi. Donec volutpat, nisi nec vestibulum cursus, nisi erat tincidunt nunc, nec facilisis justo nulla ut urna. Integer sit amet magna nec arcu varius bibendum. Sed ac eros at ligula vehicula ullamcorper. Nulla facilisi.</p>
</body>
</html>

Conclusion

In this lesson, we covered various CSS properties for aligning and spacing text, including text-align, text-indent, line-height, letter-spacing, and word-spacing. These properties are essential for creating well-structured and readable web pages. Practice using these properties to enhance the typography of your web projects.

Text Alignment and Spacing

Key Concepts

Text Alignment

Example

Text Indentation

Example

Line Height

Example

Letter Spacing

Example

Word Spacing

Example

Practical Exercise

Task

Solution

Conclusion

CSS Mastery: From Beginner to Advanced

Module 1: Introduction to CSS

Module 2: Text and Font Styling

Module 3: Box Model and Layout

Module 4: Positioning and Floating

Module 5: Flexbox

Module 6: CSS Grid

Module 7: Advanced CSS Techniques

Module 8: Responsive Design

Module 9: Preprocessors and Frameworks

Module 10: Best Practices and Optimization

Module 11: Project: Building a Responsive Website