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