1. Font Properties

Font properties control how text appears in terms of typeface, size, weight, and style.

1.1 Font Family

The font-family property specifies the typeface for the text. You can list multiple fonts as a fallback.

Code Example: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Font Family Example</title>
    <style>
        .font-family-example {
            font-family: 'Arial', sans-serif;
            background-color: lightyellow;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="font-family-example">This text uses the Arial font.</div>
</body>
</html>

1.2 Font Size

The font-size property sets the size of the font. It can be specified in various units such as pixels (px), em units (em), or percentages (%).

Code Example: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Font Size Example</title>
    <style>
        .font-size-example {
            font-size: 24px;
            background-color: lightblue;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="font-size-example">This text has a font size of 24 pixels.</div>
</body>
</html>

1.3 Font Weight

The font-weight property defines the thickness of the font. Values can be keywords like normal or bold, or numeric values from 100 to 900.

Code Example: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Font Weight Example</title>
    <style>
        .font-weight-example {
            font-weight: bold;
            background-color: lightgreen;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="font-weight-example">This text is bold.</div>
</body>
</html>

1.4 Font Style

The font-style property specifies the style of the font, such as normal, italic, or oblique.

Code Example: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Font Style Example</title>
    <style>
        .font-style-example {
            font-style: italic;
            background-color: lightcoral;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="font-style-example">This text is italicized.</div>
</body>
</html>

1.5 Line Height

The line-height property sets the amount of space between lines of text. It can be a unitless number, a length, or a percentage.

Code 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-example {
            line-height: 1.5;
            background-color: lightgray;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="line-height-example">
        This text has a line height of 1.5.
        <br>
        It affects the spacing between lines.
    </div>
</body>
</html>

2. Text Properties

Text properties manage how text is aligned, decorated, transformed, and shadowed.

2.1 Text Align

The text-align property specifies the horizontal alignment of text within its container.

Code Example: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Align Example</title>
    <style>
        .text-align-example {
            text-align: center;
            background-color: lightblue;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="text-align-example">This text is centered.</div>
</body>
</html>

2.2 Text Decoration

The text-decoration property is used to set text decorations such as underline, overline, line-through, or none.

Code Example: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Decoration Example</title>
    <style>
        .text-decoration-example {
            text-decoration: underline;
            background-color: lightyellow;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="text-decoration-example">This text is underlined.</div>
</body>
</html>

2.3 Text Transform

The text-transform property controls the capitalization of text. Options include uppercase, lowercase, capitalize, and none.

Code Example: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Transform Example</title>
    <style>
        .text-transform-example {
            text-transform: uppercase;
            background-color: lightcoral;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="text-transform-example">This text is uppercase.</div>
</body>
</html>

2.4 Text Shadow

The text-shadow property adds shadow effects to text. It requires values for horizontal offset, vertical offset, blur radius, and color.

Code Example: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Shadow Example</title>
    <style>
        .text-shadow-example {
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            background-color: lightblue;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="text-shadow-example">This text has a shadow effect.</div>
</body>
</html>