Bubble Language School

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

thatcreate.com

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

Leave a Comment

Your email address will not be published. Required fields are marked *