How to write DOS text on your site

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 company owner from Sweden who lives together with his wife and son. Some of his interests are SEO, web development, writing and taking photos. Read his full about page or contact him. Follow Jim on Twitter or subscribe to this blog.
In Swedish: presentation, blog.

13 responses »Leave a comment

Marcus
said on December 18, 2005 at 12:04 am

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

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 8:30 pm

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

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

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 10:16 pm

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

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 4:03 pm

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

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 8:47 am

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

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 1:08 pm

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 5:07 am

Wow! very nice..

Thanks! Keep it up!