almost-zero-css

is a 585-byte class-less collection of css styles for simple responsive html pages.

it supports dark and light themes and comes in two sizes:

view source and feel free to copy. most likely no major changes in your html required. take a look at the following examples:

image

gif by kevlavery

code

<kbd> — for user input
<q> for copy-paste friendly
multiline blocks
<var> — variables
<samp> — sample outputs
  

link

• visited
• not visited
• small

style

• code
• italic
• bold
• strike

text

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim.

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

form

source

* {
  box-sizing: border-box;
}
html {
  margin: 1rem auto;
  max-width: 40rem;
  font: 20px/1.4 arial, sans-serif;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
footer,
header {
  margin: 1rem 0;
}
a,
a:active,
a:hover,
a:visited:hover {
  color: #204fd5;
}
a:visited {
  color: #334f83;
}
hr {
  border: 0;
}
h1,
h2,
hr {
  margin-top: 3rem;
}
html,
ul {
  padding: 0 1rem;
}
li {
  padding: 0.125rem 0;
}
p img,
table {
  width: 100%;
}
footer,
header,
small {
  font-size: 0.8rem;
  line-height: 1.2rem;
}
small,
small a,
small a:visited {
  color: #888;
}
blockquote {
  border-left: 0.05rem solid #ccc;
  margin: 0;
  padding-left: 0.8rem;
}
code,
pre {
  font-family: menlo, monospace;
}
pre,
table {
  font-size: 1rem;
}
pre {
  line-height: 1.6rem;
  overflow-x: auto;
}
q::before {
  content: "> ";
  color: #aaa;
}
kbd {
  color: #000;
  font-weight: 700;
}
samp {
  background-color: #00c;
  color: #fff;
}
var {
  background-color: #fda;
}
table {
  text-align: left;
  border-collapse: collapse;
}
td,
th {
  vertical-align: top;
  padding: 0.5rem 1rem 0.5rem 0;
  border-bottom: 0.05rem solid #ccc;
}
td:first-child {
  white-space: nowrap;
}
td:last-child,
th:last-child {
  padding-right: 0;
}
tr:last-child td {
  border-bottom: 0;
}

@media (prefers-color-scheme: dark) {
  html {
    background-color: #000;
    color: #ccc;
  }
  a {
    color: #fda;
  }
  a:active,
  a:hover,
  a:visited:hover,
  kbd,
  samp {
    color: #fff;
  }
  a:visited {
    color: #ba8;
  }
  small,
  small a,
  small a:visited {
    color: #888;
  }
  q::before {
    color: #555;
  }
  var {
    color: #000;
  }
  samp {
    background-color: #00c;
  }
  blockquote {
    border-left-color: #444;
  }
  td,
  th {
    border-bottom-color: #444;
  }
}