Monospace.css

About

Styles that make your HTML document to look like it is a command line interface. Monospace.css is made just for fun — it wasn't intended to use it in production.

Guide

To try it out you should add a stylesheet link to "https://800147.github.io/monospace/src/monospace.css". Also if you want to replace the cursor with a stylized one you can add the script with src equal to "https://800147.github.io/monospace/src/monospace.js". And that's it!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Monospace.css example</title>
    <meta name="color-scheme" content="light dark" />
    <link rel="stylesheet" href="https://800147.github.io/monospace/src/monospace.css" />
    <script src="https://800147.github.io/monospace/src/monospace.js"></script>
  </head>
  <body>
    <h1>Title</h1>
    <p>Some text</p>
  </body>
</html>

Cursor view

Supported tags

Here is the list of supported tags:

body
main
section
h1, h2, h3, h4, h5, h6
hr
p
ul, ol
a
button
code
pre
figure
blockquote
table
input[type="checkbox"]
input[type="radio"]

You can check how all this look at the example page.

example page

Sources

The sources can be found on Github:

sources on Github