Demo: https://www.lenlop123.com/2020/09/12-color-text-align-vertical-align-text.html


<style>
  h1 {color: #0000FF;
  p.example1 {color: rgb(255,0,0);
  p.example2 {color: green;
</style>

<h1>This is a heading</h1>
<p class="example1">This is a paragraph</p>
<p class="example2">The text inside the paragraph is green.</p>





<style>
  p.left {text-align: left;}
  p.right {text-align: right;}
  p.center {text-align: center;}
  td.top {vertical-align: top;}
  td.middle {vertical-align: middle;}
  td.bottom {vertical-align: bottom;}
  span.baseline {vertical-align: baseline;}
  span.sub {vertical-align: sub;}
  span.super {vertical-align: super;}
  span.pixel {vertical-align: -10px;}
</style>

<p class="left">This paragraph is aligned to <strong>left.</strong></p>
<p class="right">This paragraph is aligned to <strong>right.</strong></p>
<p class="center">This paragraph is aligned to <strong>center.</strong></p>

<table border="1" cellpadding="2" cellspacing="0" style="height: 150px;">
    <tr>
        <td class="top">Top</td>
        <td class="middle">Middle</td>
        <td class="bottom">Bottom</td>
    </tr>
</table>

<p>This is an <span class="baseline">inline text</span> example.</p>
<p>This is a <span class="sub">sub line text</span> example.</p>
<p> This is a <span class="super">super line text</span> example.</p>
<p> This is a <span class="pixel">pixel</span> example.</p>





<style>
  p.none {text-decoration: none;}
  p.inherit {text-decoration: inherit;}
  p.overline {text-decoration: overline;}
  p.underline {text-decoration: underline;}
  p.line-through {text-decoration: line-through;}
</style>

<p class="none">This is default style of the text (none).</p>
<p class="inherit">This text inherits the decoration of the parent.</p>
<p class="overline">This is overlined text.</p>
<p class="underline">This is underlined text.</p>
<p class="line-through">This is lined-through text.</p>

Kết quả : 



<style>
    p {text-indent: 60px;}
</style>

<p>This is an example of <strong>text-indent </strong> property.
First line of our text is indented to the right in 60px.
Besides pixels you can also use other measurement units,
like pt, cm, em, etc. </p>




<style>
    h1.shadow1 {color: blue;font-size: 30pt;text-shadow: 5px 2px 4px grey;}
    h1.shadow2 {font-size: 20pt;text-shadow: rgba(0,0,255,1) -1px -2px 0.5em;}
</style>

<h1 class="shadow1">Text-shadow example</h1>
<h1 class="shadow2">Text-shadow with blur effect</h1>





<style>
  p.capitalize {
      text-transform: capitalize;
  }
  p.uppercase {
    text-transform: uppercase;
  }
  p.lowercase {
      text-transform: lowercase;
  }
</style>

<p class="capitalize">This value transforms all characters to capitalize.</p>
<p class="uppercase">This value transforms all characters to uppercase.</p>
<p class="lowercase">This value transforms all characters to lowercase.</p>