How to Highlight Words with HTML & HEX, RBG Color Code

Introduction

So, you want to be a coder. This is the journey of one stupid, young/old man who is trying to work on some ideas.

Here’s how to highlight words by HTML, HEX, and RGB color-coding…

by English parts of speech: adjective, adverb, article, conjunction, noun, pronoun, preposition, verb, and the interjection (not included).

Beyond the forest, the troll menacingly hid under the rickety bridge.

Here’s the code. The results are above.

Conclusion

You can embed CSS style inside of HTML code. See <style>.
You can use RBG to utilize a wide range of colors.
See the end message for the next step for this noob coder 🙂

<html>
  <head>

    <meta charset="UTF-8">
    <title>React Pad</title>

  </head>
  <body>

    <style>

.App {
  width:500px;
  border:2px solid black;
  border-radius:20px;
  background: linear-gradient(#fff 10%, #f1f1f1 98%, #ccc);
  padding:0 20px 20px;
  font-family: monospace;
}
body {
  background:rgb(242, 242, 245);
}
p{color: yellow;
}
span{color: green;
}
span.noun{color: red;
}
span.verb{color: blue;
}
span.adjective{color:orange;
}
span.pronoun{color:yellow;
  background:black;
}
span.adverb{color:lightblue;
}
span.conjunction{color:green;
}
span.article{color:black;
}
span.interjection{color: gold;
}
span.period{color:black;
}
span.comma{color:black;
}

    </style>

 <p><span class="preposition">Beyond</span> <span class="article">the</span> <span class="noun">forest</span><span class="comma">,</span> <span class="article">the</span> <span class="noun">troll</span> <span class="adverb">menacingly</span> <span class="verb">hid</span> <span class="preposition">under</span> <span class="article">the</span> <span class="adjective">rickety</span> <span class="noun">bridge</span><span class="period">.</span></p>

  </body>
</html>

//write code that will replace the "" by span and find out how to scan a line of text/pdf/website again