Welcome Guest! (App Version 3.1)

websitnero logo name

Text Formatting

This section deals with various options and properties related to text modification. We may change its color, font-family, font-size, text-decoration and so on. Kindly, go through the content below to see what various changes we can make to text in an html document to modify its cosmetics.

Color

Color property is used to set or change text-color of the content. There are three ways to do so:

  • Common Name: red, green blue
  • Hex format: #ff99aa, #717171, #33fa9b
  • RGB format: rgb(255,205,171), rgb(71,29,31), rgb(0, 0, 210)

Example

<head>
<style>
  .p1{background:red;}
  .p2{background:#ffa9a9;}
  .p3{background:rgb(153,71,225);}
</style>
</head>

<body> 
  <p class="p1">This is paragraph 1.</p>
  <p class="p2">This is paragraph 2.</p>
  <p class="p3">This is paragraph 3.</p>
</body> 

Text-Align

Text-Align property is used to set the horizontal alignment of the text. Following 3 values can be set:

  • left: To set the text to the left (Normal flow)
  • right: To set the text to the right
  • center: To set the text at the center (Gererally in headings)

Example

<head>
<style>
  .p1{text-align: left;}
  .p2{text-align: right;}
  .p3{text-align: center;}
</style>
</head>

<body> 
  <p class="p1">This is paragraph 1.</p>
  <p class="p2">This is paragraph 2.</p>
  <p class="p3">This is paragraph 3.</p>
</body> 

Text-Decoration

Text-Decoration property is used to add lines to the text which go to top, bottom or accross the text. Three valid values are as follows:

  • overline: To put line over text (Rarely used, mostly used to depict physics or mathematical variables)
  • line-through: To show deleted text
  • underline: To put underline to text

Example

<head>
<style>
  .p1{text-decoration: overline;}
  .p2{text-decoration: line-through;}
  .p3{text-decoration: underline;}
</style>
</head>

<body> 
  <p class="p1">This is paragraph 1.</p>
  <p class="p2">This is paragraph 2.</p>
  <p class="p3">This is paragraph 3.</p>
</body> 

Text-Transform

This property is used to set the Case of the text. Three valid values are as follows:

  • uppercase: To convert all the text to uppercase
  • lowercase: To convert all the text to lowercase
  • capitalize: To convert the text to first letter capital while rest to lower text

Example

<head>
<style>
  .p1{text-transform: uppercase;}
  .p2{text-transform: lowercase;}
  .p3{text-transform: capitalize;}
</style>
</head>

<body> 
  <p class="p1">This is paragraph 1.</p>
  <p class="p2">This is paragraph 2.</p>
  <p class="p3">This is paragraph 3.</p>
</body> 
Further Reading

1. Text Formatting in CSS

WebsiteNero is highly optimized for learning various website developing technlogies. We try our best to add maximum modules and examples to help learn the concepts clearly and vividly. We try to present all content and examples as simple as we can removing any complexity to hurdle easy understanding. We try best provide you with worthful content, but we cannot guarantee full correctness of all the content on this site. While using this website, you agree to have read and accepted all our terms of use and conditions, cookie, and privacy policy. Copyright, 2013-2018 by websitenero.com. All Rights Reserved.