CSS text


Text color in CSS

    Syntax

  • selector{
    color:value;
    }

Text alignment in CSS

    Syntax

  • selector{
    text-align:value;
    }

Making text justified in CSS

We use this property in CSS to make every line of text equal in width.

    Syntax

  • selector{
    text-align:justify;
    }

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align:center;
color:red;
text-align:justify;
}
</style>
<title>
CSS TEXT
</title>
</head>
<body>
<p>This is paragraph.</p>
</body>
</html>

Output:

This is paragraph.

Text setup using CSS


Uppercase text transformation in CSS

    Syntax

  • selector{
    text-transform:uppercase;
    }

Lowercase text transformation in CSS

    Syntax

  • selector{
    text-transform:lowercase;
    }

Capitalizing text in CSS

    Syntax

  • selector{
    text-transform:capitalize;
    }

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p.uppercase{
text-transform:uppercase;
}
p.lowercase{
text-transform:lowercase;
}
p.capitalize{
text-transform:capitalize;
}
</style>
<title>
CSS TEXT
</title>
</head>
<body>
<p class="uppercase">This is uppercase paragraph.</p>
<p class="lowercase">This is lowercase paragraph.</p>
<p class="capitalize">This is capitalized paragraph.</p>
</body>
</html>

Example:

This is uppercase paragraph.

THIS IS LOWERCASE PARAGRAPH.

This is capitalized paragraph.

Letter spacing in CSS

We use this property of CSS to adjust space between different letters.

    Syntax

  • selector{
    letter-spacing:value;
    }

Word spacing in CSS

    Syntax

  • selector{
    word-spacing:value;
    }

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p.letterspace{
letter-spacing:5px;
}
p.wordspace{
word-spacing:10px;
}
</style>
<title>
CSS WORD SPACING
</title>
</head>
<body>
<p class="letterspace">This paragraph explains letter-space.</p>
<p class="wordspace">This paragraph explains word-space.</p>
</body>
</html>

Output:

This paragraph explains letter space.

This paragraph explains word space.