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 {
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";
@media (prefers-color-scheme: dark) {
body {
a:link {
a:visited {

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:


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.


The colors come from Perfect Website from above.

That leaves me with 170 bytes from a minified stylesheet.

If someone knows how to achieve better results with - preferably - what I have, let me know.