Using CSS for Styling

Your Dynamic Content region’s generated HTML markup can reference Cascading Style Sheets (CSS) classes to fine-tune its styling.

Since you want the result to look like a Dec VT220 terminal, you can define a CSS class named vt220 in your page’s CSS > Inline section in the Property Editor. Its name begins with a dot and contains the appropriate style property name/value pairs to give a green, monospace font on a black background with a glowing box shadow. To override the Universal Theme styling of a <pre> tag in the contents of an element with the vt220 class assigned to it, you include a second CSS rule for the .vt220 pre selector to get a tighter line spacing as well.

To assign the vt220 CSS class to the dynamic content region, simply mention it in the Appearance > CSS Classes property of the region without the dot in front of the name. This combination produces the desired result.

.vt220 {
  background-color: black;
  color: #00FF00;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  padding: 1.5em;
  border-radius: 16px;
  border: 3px solid #333;
  box-shadow: 0 0 20px #00ff00aa;
  width: fit-content;
  margin: 2em auto;
}
.vt220 pre {
  line-height: 1.0;
}