CSS: Text

CSS provides a wide range of properties for styling text on web pages. These properties allow you to control aspects such as font size, font family, font weight, text alignment, text decoration, line height, letter spacing, and more. Here's an overview of some common CSS text properties and how they can be used:

• Font Family (font-family): Specifies the typeface or font family for text. You can specify multiple font families as fallback options.

body {
    font-family: Arial, Helvetica, sans-serif;
}

.special-text {
    font-family: 'Times New Roman', Times, serif;
}

• Font Size (font-size): Sets the size of the text. You can use various units such as pixels (px), ems (em), percentages (%), or keywords like small, medium, large, etc.

h1 {
    font-size: 24px;
}

p {
    font-size: 16px;
}

• Font Weight (font-weight): Specifies the thickness or weight of the font. Common values include normal, bold, bolder, lighter, or numeric values (100 to 900).

strong {
    font-weight: bold;
}

.light-text {
    font-weight: lighter;
}

• Text Color (color): Sets the color of the text. You can use named colors, hexadecimal codes, RGB values, or color keywords.

.primary-text {
    color: blue;
}

.highlight-text {
    color: #FF0000; /* Red color */
}

• Text Alignment (text-align): Specifies the horizontal alignment of text within its container. Values can be left, right, center, or justify.

.centered-text {
    text-align: center;
}

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

• Text Decoration (text-decoration): Adds decorations such as underline, overline, line-through, or none (removes any decoration).

a {
    text-decoration: underline;
}

.crossed-out-text {
    text-decoration: line-through;
}

• Line Height (line-height): Sets the height of each line of text, which can improve readability and spacing.

p {
    line-height: 1.5; /* Line height 1.5 times the font size */
}

.tight-line-height {
    line-height: 1; /* Normal line height */
}

• Letter Spacing (letter-spacing): Adjusts the spacing between characters.

.spaced-text {
    letter-spacing: 1px; /* 1-pixel letter spacing */
}

.wide-letter-spacing {
    letter-spacing: 2px; /* 2-pixel letter spacing */
}

These are just some of the CSS properties that you can use to style text on web pages. By combining these properties effectively, you can create visually appealing and readable text content for your website.