Webmasters Gallery

 to display space-formatted text (like code), but you could say terminal text isn't always code, so I like the use of 
 here.

Might as well use a nice monospace font:
body {
  ...
  color: white;
  font: 1.3rem Inconsolata, monospace;
}

The text on the demo appears a bit blurry. We could go with a slight filter like filter: blur(0.6px);, but it seems blurring that way comes out either too blurry or not blurry enough. Let's try using text-shadow instead:
body {
  ...
  text-shadow: 0 0 5px #C8C8C8;
}

Now on to those monitor lines! Ideally, they should sit on top of the text, so let's use an ::after pseudo-element that's absolutely positioned over the whole area and use a repeating linear gradient for the lines (because it's always nice to avoid using images if we can):
body::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: repeating-linear-gradient(
    0deg,
    rgba(black, 0.15),
    rgba(black, 0.15) 1px,
    transparent 1px,
    transparent 2px
  );
}
You can see these faint black lines on white here: 

And then over our original green burst background to complete the look:

It's a nice touch to add a fun selection style and remove the blurring for clarity when selecting:
::selection {
  background: #0080FF;
  text-shadow: none;
}

Complete demo:
See the Pen Terminal Output by Chris Coyier  (@chriscoyier) on CodePen.
The post Old Timey Terminal Styling appeared first on CSS-Tricks.