<div>
  <div>MAKE</div>
  <div>MORE</div>
  <div>ONLINE</div>
  <div>FOR</div>
  <div>LESS</div>
</div>
<article></article>

@import url('https://fonts.googleapis.com/css2?family=Roboto&family=Workbench&display=swap');

:root {
  --black : #000;
  --size: 8rem;
}

body {
  font-family: "Workbench", sans-serif;
  background: var(--black);
  color: #FFF;
  font-size: var(--size);
  display: grid;
  place-content: center;
  justify-items: center;

  > * {
    grid-area: 1 / 1;
  }
}
article { 
  height: 100VH; width:100vw;
  background-size: calc(var(--size) / 10) calc(var(--size) / 10);
  background-image:
    linear-gradient(to right, var(--black) 1px, transparent 1px),
    linear-gradient(to bottom, var(--black) 1px, transparent 1px);
}

.c1 { color: red;}
.c2 { color: blue;}
.c3 { color: green;}
.c4 { color: orange;}
.c5 { color: yellow;}

/* simple starter solution for question
https://www.sitepoint.com/community/t/colorful-styled-text-in-css-only/476911
*/

const allDivs = document.querySelectorAll("div div"); 

// loop through all divs
allDivs.forEach(div => {
  var str = div.innerHTML;
  div.innerHTML = '';
  // wrap each letter with a span w/ class
  str.split('').forEach(c => {
  var random = Math.floor(Math.random() * (6 - 1 + 1) + 1); // generate a number between 1 and 6
    var newSpan = document.createElement("span");
    newSpan.classList.add("c" + random);
    newSpan.innerHTML = c;
    div.appendChild(newSpan);
  });
});