HTML CSS - Fonts and Text

Styling fonts and text properties

Fonts and text styling are essential components of web design, enhancing readability and visual appeal. CSS provides a range of properties for styling fonts and text properties. This tutorial covers how to use these properties effectively.

Setting Font Family

The font-family property is used to set the font of the text. You can specify multiple font names as a "fallback" system. Here is an example:

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

If the browser does not support the first font, it tries the next one, and so on.

Setting Font Size

The font-size property is used to set the size of the text. You can specify font size using absolute-size keywords, relative-size keywords, length values, and percentage values. Here are some examples:

/* Absolute-size keyword */
p {
    font-size: medium;
}

/* Relative-size keyword */
p {
    font-size: larger;
}

/* Length value */
p {
    font-size: 16px;
}

/* Percentage value */
p {
    font-size: 150%;
}
            

Setting Font Weight

The font-weight property is used to set the weight (boldness) of the text. You can specify font weight using keywords or numeric values. Here are some examples:

/* Keyword value */
p {
    font-weight: bold;
}

/* Numeric value */
p {
    font-weight: 700;
}
            

Setting Font Style

The font-style property is used to set the style of the text, such as normal, italic, or oblique. Here is an example:

p {
    font-style: italic;
}
            

Setting Text Color

The color property is used to set the color of the text. You can specify colors using named colors, HEX values, RGB, RGBA, HSL, and HSLA. Here are some examples:

/* Named color */
p {
    color: blue;
}

/* HEX value */
p {
    color: #ff0000;
}

/* RGB value */
p {
    color: rgb(0, 128, 0);
}

/* RGBA value */
p {
    color: rgba(0, 128, 0, 0.5);
}

/* HSL value */
p {
    color: hsl(120, 100%, 25%);
}

/* HSLA value */
p {
    color: hsla(120, 100%, 25%, 0.5);
}
            

Text Alignment

The text-align property is used to set the horizontal alignment of the text. Values include left, right, center, and justify. Here is an example:

p {
    text-align: center;
}
            

Text Decoration

The text-decoration property is used to add decoration to the text, such as underline, overline, line-through, and blink. Here is an example:

p {
    text-decoration: underline;
}
            

Text Transformation

The text-transform property is used to control the capitalization of text. Values include none, capitalize, uppercase, and lowercase. Here is an example:

p {
    text-transform: uppercase;
}
            

Line Height

The line-height property is used to set the height of each line of text. Here is an example:

p {
    line-height: 1.5;
}
            

Letter Spacing

The letter-spacing property is used to set the spacing between characters. Here is an example:

p {
    letter-spacing: 2px;
}
            

Text Shadow

The text-shadow property is used to add shadow to the text. Here is an example:

p {
    text-shadow: 2px 2px 5px gray;
}
            

Combining Font and Text Properties

You can combine multiple font and text properties to create visually appealing text. Here is an example:

p {
    font-family: "Arial", "Helvetica", sans-serif;
    font-size: 18px;
    font-weight: bold;
    font-style: italic;
    color: navy;
    text-align: center;
    text-decoration: underline;
    text-transform: capitalize;
    line-height: 1.5;
    letter-spacing: 1px;
    text-shadow: 1px 1px 2px black;
}
            

Summary

In this tutorial, you learned how to style fonts and text properties using CSS. You explored setting font family, size, weight, style, and color, as well as text alignment, decoration, transformation, line height, letter spacing, and text shadow. Understanding these properties is essential for creating readable and visually appealing web pages.