CSS - Text




CSS Text

In the previous chapter you’ve learnt about fonts and now we will learn about one more interesting property of CSS i.e., how to manipulate text using CSS?

In this chapter we will learn the following properties,

  • Text Color

  • Font Size

  • Font Family

  • Font Style

  • Text Allignment

  • Text Decoration

  • Text Transformation

  • Text Indentation

Text Color

CSS Color property is used to change the color of text.The value of color can be HEX value,RGB value,name.

Syntax

p
{
color:blue;
}

Font Size

CSS font-size property used to increase the size of text

Syntax

p
{
font-size:40px;
}

Font Family

CSS font-family property is used to change the font type of the text.The value font-family is name of fonts.

Syntax

p
{
font-family:Helvetica;
}

Font Style

CSS font-style property is used to change the font style of the text.

Syntax

p
{
font-style:italic;
}

Text Allignment

CSS text-allign property is used to allign text in different horizontal types its value can be left,right,center,justify((like in newspapers).

Syntax

p
{
text-allign:center;
}

Text Decoration

To add or remove decorations from text we use this property.

The possible values are,

none, overline, line-through, underline, blink

Example

<html>
 <body>
    <p style="text-decoration:none">No Text Decoration</p>
    <p style="text-decoration:overline">Overline Text Decoration</p>
    <p style="text-decoration:line-through">Line through Text Decoration</p>
    <p style="text-decoration:underline">Underline Decoration</p>
    <p style="text-decoration:blink">Blink Decoration</p>
 </body>
</html>

Result

Text Transformation

CSS text-transform property is used to change the text to uppercase,lowercase or capitalize the first letter of each word its value can be uppercase,lowercase,capitalize.

Syntax

p
{
text-transform:capitalize;
}

Text Indentation

CSS text-indent property is used to specify the indentation of the first line of a text.

Syntax

p
{
text-indent:40px;
}