Font and Text Properties in CSS


What are 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.


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


Code Described in the video

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Font and Text Properties </title>
    <style>
        /* Font Properties */
        p {
            font-size: 15px;
        }
        .para {
            /* font-weight: bold;             */
            font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
            line-height: 50px;
        }
        /* Text Properties */
        .para {
            color: rgb(255, 255, 255);
            text-align: center;
            background-color: yellow;
            text-transform: lowercase;
            text-decoration: underline;
            word-spacing: 30px;
            text-shadow: 1px 1px 0.5px blue;
            letter-spacing: -1px;
        }
    </style>
</head>
<body>
    <p> This is a paragraph </p>
    <p class="para"> THIS is ANOTHER paragraph </p>
    <p> This is also another paragraph </p>
</body>
</html>



Tags
Raju Sheoran

Raju Sheoran

Hi!, I'm the Founder and Developer of Geeks Help we provide the best Computer or Programming Related Content With Notes PDF, Amazing Designs, Easy to Readable for Learners. linkedin instagram facebook

Post a Comment

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

Top Post Ad

Below Post Ad

Ads Section