The smallest stylesheet possible

#css #html #javascript #webdev

This is my experiment in building or finding the smallest working CSS stylesheet.

Experiment is to find and create the smallest stylesheet for my website while still being concerned about accessibility and user experience.

For disclaimer, websites such as Motherf-king Website don't count because it doesn't have a stylesheet (and it uses Google Analytics for some reason).

The second contestant is one of its final successors, Perfect Motherf-cking Website that does have a stylesheet with 3 rules and one media query for dark mode (points for dark mode!). I downloaded the stylesheet and got 444 bytes from it, ungzipped and unminified.

This is the stylesheet:

body {
 max-width:650px;
 margin:40px auto;
 padding:0 10px;
 font:18px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 color:#444
}
h1,
h2,
h3 {
 line-height:1.2
}
@media (prefers-color-scheme: dark) {
 body {
  color:#ccc;
  background:black
 }
 a:link {
  color:#5bf
 }
 a:visited {
  color:#ccf
 }
}

But its predecessor, Better Motherf-cking Website actually got a smaller footprint: 120 bytes with only two rules. The stylesheet is minified, also.

The code:

body{margin:40px
auto;max-width:650px;line-height:1.6;font-size:18px;color:#444;padding:0
10px}h1,h2,h3{line-height:1.2}

Hard to top this one.

But it doesn't make an effort for dark layout, so this is a compromise I may have to make.

Some adjustements to my stylesheet for the body:

body{margin:40px auto;max-width:600px;font:normal 1.2em sans-serif;background:#121212;color:#fafafa;padding:0 10px;line-height:1.4}

Max content and margins are generally equal to before, but I used the general font property to save some bits. Background and color are being almost swapped for people who find continuously harder read on brighter screens (such as me). I know I should ask the user for its preferences, but in the context of personal sites, getting an obligatory dark interface is not a problem.

The rest comes with the necessity of changing links colors to make it readable.