How to write DOS text on your site

Note: Take a look at my project, I offer you a professional website for free with N.nu.

Do you want web site text that looks like DOS text?

Here is the CSS that produces what you see on this page:

.dos {

  width: 400px;

  background: #000;

  padding:30px;

  font-size: 9pt;

  font-family: fixedsys, LucidaTerminal, monospace;

  color: #909090;

  text-align: left;

  overflow:auto;

  border: 5px solid #909090;

  }
Good luck!

New added:

I made this for fun, check it out!

About the Author

Jim Westergren is a web entrepreneur from Sweden who lives together with his wife and son. Some of his interests are programming, web development, SEO, writing and taking photos. His current major project is N.nu. Read his full about page.
Follow Jim on Twitter or subscribe to this blog. In Swedish: presentation, blog.

14 responses »Leave a comment

Marcus
said on December 18, 2005 at 00:04

Awesome Jim!
I like it more retro on the net!
Pelle
said on December 18, 2005 at 00:26

Never thought about doing something like that but it’s actually quite cool. Thanks for the tip anyway
Roger
said on December 18, 2005 at 20:30

Wasn’t the DOS text white and not dark grey? It still looks cool. Nice work.
Timothy
said on December 18, 2005 at 20:32

Excellent programming skills you have there. I came from Digg.
Greg Marra
said on December 18, 2005 at 21:03

I did something similar for a web game I made a while ago, but your effect looks much more like DOS than mine. Cool stuff.
Daniel Smith
said on December 18, 2005 at 22:16

This will be the look of “Web 3.0″ sites
Cheyne
said on December 20, 2005 at 08:49

This is very cool. I tried this a year or so ago and just couldn’t get it right. I blogged this tutorial over at thewebdesignblog.com
Glenn
said on December 21, 2005 at 16:03

i love MSDOS. Nice info JIM!
Michael Phillips
said on December 22, 2005 at 12:02

Thanks for this! Very clean way of presenting it, too. And, come to think of it, this is still how it looks on my Linux box outside of the GUI…. (I, too, came from Digg.)
ilushkin
said on December 23, 2005 at 08:47

Wow, this is good brings out good memories…
josh
said on March 11, 2007 at 16:14

If this is a how-to, then where are the directions to build that CSS script that makes the scrolling dos text. I would like to do it to my pages.
Jim Westergren
said on March 12, 2007 at 13:08

If this is a how-to, then where are the directions to build that CSS script that makes the scrolling dos text.

Here:
http://simplythebest.net/scripts/DHTML_scripts/javascripts/javascript_123.html
Deviantz
said on July 17, 2007 at 05:07

Wow! very nice..

Thanks! Keep it up!
Azeem Michael
said on June 24, 2011 at 17:40

awesome, will make it to good use. The javascript file link to show simulate scrolling Dos text is exactly what I was looking for.

thanks a bunch,

Azeem Michael