CSS Beginners Guide part 5 - Text and Effects

CSS providing few properties to manage and style the text, like color, size of text, alignments, decorations, transforms, and indention, we can also apply the effects to text like text shadow and word warping to text. lets see the few examples. 

Text Color

We use text-color property to set the color to text, we can set color in three ways using HEX value, Color name and rgb() value
ex:

<style>

p{text-color:#fff};
p{text-color:black};
p{text-color:rgb(255,0,0)};

</style>

Text Alignment

We use text-align property to set the text align to horizontally we can align the text to center, right, left or justified
ex:

<style>
p{

text-align:center;

text-align:right;

text-align:left;

text-align:justify;

}
</style>

Text Decoration

We use text-decoration property use to set and remove the decorations from text mostly we use this property to remove the underline from text links.
ex:

<style>
a{

text-decoration:none;


}

// we set the underline hover the text

a:hover{

text-decoration:underline;


}

</style>

Text Transform

We can manage the text uppercase to lowercase and set the starting letter to be capitalize of each word.
ex:

<style>
a{

text-transform:uppercase; // set the all text to uppercase letters

text-transform:lowercase; // set the all text to lowercase letters

text-transform:capitalize; // set the all words starting letter to capitalize

}

</style>

Text Indentation

We can give Indentation (space) to first line of text
ex:

<style>
a{

text-indent:50px; // set the 50 pixels gap to first line of text

}

</style>

Text Shadow

We can apply shadow to text using text-shadow property, this property have four values x-position, y-position, shadow depth, color.
ex:

<style>
a{

text-shadow:x-position y-position depth color;

// Example

text-shadow:50px 20px 5px red;

}

</style>

Text Word Wrap

if you want to fit your text to within a area of div, you can use word-wrap property
ex:

<style>
p{

word-wrap:break-word;

}

</style>