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 property is used to specify the font of a text.

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


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

.para {
    font-size: 20px;


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

.para {
    font-weight: bold;


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

.para {
    line-height: 1.8em;

Different text-properties


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

.para {
    color: red;


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

.para {
    background-color: purple;


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 property is used to specify uppercase and lowercase and capitalize letters in a text.

.para {
    text-transform: uppercase;


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

.para {
    text-decoration: none;


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

.para {
    word-spacing: 20px;


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">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Font and Text Properties </title>
        /* 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;
    <p> This is a paragraph </p>
    <p class="para"> THIS is ANOTHER paragraph </p>
    <p> This is also another paragraph </p>

Post a Comment

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

Top Post Ad

Below Post Ad

Ads Section