9. Text styling with CSS

Text styling with CSS is a crucial part of web design and an essential component of any front-end development course. CSS, or Cascading Style Sheets, is a styling language used to describe the appearance of a document written in HTML. It is a powerful tool that allows developers to control the layout, colors, fonts, and other visual aspects of a website.

Text styling with CSS involves several properties and values ​​that can be used to control the appearance of text on a web page. This includes text color, font size, font style, line spacing, text alignment, and more.

Text Color

The 'color' property in CSS is used to set the color of the text. You can use color names, hexadecimal values, RGB values, or HSL values ​​to define the color. For example:

<style>
    P {
        color: blue;
    }
</style>

In this example, the text inside all <p> it will be blue.

Text Size

The 'font-size' property is used to set the size of the text. You can use various units of measurement, including pixels (px), points (pt), percentages (%), and relative units like 'em' and 'rem'. For example:

<style>
    P {
        font-size: 16px;
    }
</style>

In this example, the text inside all <p> will have a size of 16 pixels.

Font Style

The 'font-style' property is used to define whether the text should be normal, italic or oblique. For example:

<style>
    P {
        font-style: italic;
    }
</style>

In this example, the text inside all <p> will be displayed in italics.

Line Spacing

The 'line-height' property is used to control the space between lines of text. You can use a number without a unit to set the line height relative to the current font size, or you can use a unit of measurement. For example:

<style>
    P {
        line-height: 1.5;
    }
</style>

In this example, the space between lines of text in all elements <p> will be 1.5 times the current font size.

Text Alignment

The 'text-align' property is used to control text alignment. You can align the text left, right, center, or justify the text. For example:

<style>
    P {
        text-align: center;
    }
</style>

In this example, the text inside all <p> will be centralized.

In addition to these basic properties, there are many other CSS properties that you can use to style text, including 'text-decoration' to add a line through text, underline text, or add a line above text; 'text-transform' to control text capitalization; and 'letter-spacing' and 'word-spacing' to control the space between letters and words respectively.

When learning how to style text with CSS, it's important to remember that cascading in Cascading Style Sheets means that CSS rules are applied in order, with later rules overriding earlier rules if they have the same specificity. Therefore, the order in which you write your CSS rules and how you select your elements can have a big impact on the final appearance of your text.

In summary, text styling with CSS is an essential skill for any front-end developer. With a solid understanding of CSS properties and values, you can create attractive, readable text that improves user experience and helps effectively communicate your site's message.

Next page of the Free Ebook:

56Layout and positioning with CSS

3 minutes