CSS Font and Text Properties

Raju Sheoran

CSS Font and Text Property

Font properties are used to add different styles to the fonts.

Font properties are used to change the style, size, weight, etc. of the font.

Font styling adds a good impact on the readers, that's why we use different font styling properties.

Text properties are used to format text styles.

This will be our basic boilerplate code for font and text properties.

index.html

<!DOCTYPE html>
<html>
<head>
    <title> Font & Text Properties in CSS </title>
    <style>
        
    </style>
</head>
<body>
    <p class="para"> This is a paragraph </p>
</body>
</html>

Different font-properties

font-family:

font-family property is used to specify the font of a text.

.para {
    font-family: 'sans-serif', 'Ubuntu';
}

font-size

font-size property is used to specify the size of the text.

.para {
font-size: 20px;
}

font-weight

font-weight property set, how bold or thin characters in the text should be displayed

.para {
font-weight: bold;
}

line-height

The line-height property specifies the space between the fonts.

.para {
line-height: 1.8em;
}

Different text-properties

color:

The color property is used to set the color of the text.

.para {
    color: red;
}

background-color:

This property is used to set the background color of the text.

.para {
    background-color: purple;
}

text-align:

The text-align property is used to set the alignment of a text. We can align a text in the left, right, center, and justify.

.para {
    text-align: center;
}

text-transform:

text-transform property is used to specify uppercase and lowercase and capitalize letters in a text.

.para {
    text-transform: uppercase;
}

text-decoration

text-decoration properties are used to decorate text in one declaration.

.para {
    text-decoration: none;
}

word-spacing

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

.para {
    word-spacing: 20px;
}

text-shadow

The text-shadow property is used to add the shadow effect to the text.

.para {
    text-shadow: 1px 1px yellowgreen;
}

letter spacing

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

.para {
    letter-spacing: 20px;
}