×

Html & Html5

The World's best Software Development Study Portal

CSS Text



In CSS many more properties are there by which we can define different effects in our text . And these effects are as follows:-



Text color



If we want to give color to any text through this text color property we can do that also. Let's understand this by the following example :-



<!DOCTYPE html>

<html>

<head>

<style>

.main{

      color:blue;

}

</style>

</head>

<body>

<div>

<p> I am <span class="main">Manish </span> </p>

<p class="red"> Hey I love India </p>

</div>

</body>

</html>



Output of the Program



I am Manish

Hey I love India


So we get our desired text color here through text-color property .


Text alignment



If we want to set our text at the left side,right side ,center than we can use this text alignment property. Let's understand this by the following example :-




<!DOCTYPE html>

<html>

<head>

<style>

p{

      text-align:right;

}

</style>

</head>

<body>

<div>

<p> I am Manish </p>

<p> Hey I love India </p>

</div>

</body>

</html>



Output of the Program



I am Manish

Hey I love India


So changes the position of our paragraph from left to right.




Text decoration



If we want to add or remove simply the decoration from the text. The possible values of text-decoration will be :-

  • underline
  • overline
  • line-through
  • none


Let's understand this by the following example :-



<!DOCTYPE html>

<html>

<head>

<style>

.main{

      text-decoration:underline;

}

</style>

</head>

<body>

<div>

<p> I am <span class="main">Manish </span> </p>

<p class="red"> Hey I love India </p>

</div>

</body>

</html>



Output of the Program



I am Manish

Hey I love India




Values Description
color Sets the color of text
direction specify text direction
letter-spacing Increases or decreases the space between characters in a text
line-height Sets the line height
text-align Specifies the horizontal alignment of text
text-decoration Specifies the decoration added to text
text-indent Specifies the indentation of the first line in a text-block
text-shadow Specifies the shadow effect added to text
text-transform Controls the capitalization of text
text-overflow Specifies how overflowed content that is not displayed should be signaled to the user
unicode-bidi Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document
vertical-align Sets the vertical alignment of an element
white-space Specifies how white-space inside an element is handled
word-spacing Increases or decreases the space between words in a text





CSS 3 training insitute | Best IT Training classes in Gurgaon | Web Designing Training Institute