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:
ex:
ex:
ex:
ex:
ex:
ex:
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 justifiedex:
<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 textex:
<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 propertyex:
<style> p{ word-wrap:break-word; } </style>
No comments :
Post a comment