22-CSS Text Color


The color property is used to set the color of the text.

With CSS, a color is most often specified by:

a color name –  “yellow”

a HEX value –  “#ff0000”

an RGB value –  RGB(255,0,0)”

  • The direction property is used to set the text direction in which h you want to present the data.
  • The letter-spacing property is used to add or decrease the space between the letters that make up a word in a given sentence of your web page.
  • The word-spacing property is used to add or decrease the space between the words of a  given sentence of the paragraph provided.
  • The text-indent property is used to indent the text of a paragraph.
  • The text-align property is used to align the text of a document as per the user wish.
  • The text-decoration property is used to do  underline, overline, and strikethrough text presented in a paragraph or a division.
  • The text-transform property is used to capitalize text, or you may convert text to uppercase or lowercase letters.
  • The white-space property is used to control the flow and formatting of text.
  • The text-shadow property is used to set the text shadow around a  written text of any paragraph or division or simply  a text




  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. body {
  6.     color: blue;
  7. }
  9. h1 {
  10.     color: green;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <h1>
  16. Research on how to increase positive moods and capitalize on your strengths has proliferated, thanks to the positive psychology movement. This research has shed light on ongoing insights into personality, mood, and cognition. Though not everyone is born with a sunny disposition, experts do agree we can all learn how to bring more meaning and satisfaction into our lives.</h1>
  17. <p>This is an ordinary paragraph. Notice that this text is blue. The default text color for a page is defined in the body selector.</p>
  19. </body>


Another example demonstrating the use of Underline, line-through, overline, blink.


  1. <html>
  2.    <head>
  3.    </head>
  4.    <body>
  5.       <p style="text-decoration:underline;">
  6.       This will be underlined text completely!!
  7.       </p>
  9.       <p style="text-decoration:line-through;">
  10.       This will be striked through  for a given wording.
  11.       </p>
  13.       <p style="text-decoration:overline;">
  14.       This will have a over line of all the content presented in this paragraph.
  15.       </p>
  17.       <p style="text-decoration:blink;">
  18.       This text will have blinking effect which will enhance its attractiveness!!
  19.       </p>
  20.    </body>
  21. </html>
Facebook Comments


Please enter your comment!
Please enter your name here