CSS Font and Text Properties

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;
}

CSS Font and Text Properties Part-4 PDF

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad