256 bytes of css

256 bytes of CSS are enough to get a beautiful, readable and adaptive website.

Yes, 256B. It is 0,256 kb. Only 256 char and 6 lines.

Even less minified and gzipped

• Use "rem" unit as much as possible to keep user's size choices
• Do not set colors to keep user's client preferences
• Set a maximum width to 37rem ≈ 72 char to reduce eyes strain.
• Remove link colors and set them bold to improve legibility

body,pre { padding: 1rem }
body { font: 1.1rem/1.4 sans-serif; max-width: 37rem; margin: auto }
pre { overflow: auto; font-size: 1rem; border: 1px solid }
blockquote { font: italic 1rem serif }
a { color: inherit; font-weight:700 }
img { max-width: 100% }

Remember to have in your header :

<meta name="viewport" content="width=device-width" />

alt 1 : link hover effect, fix sizing

*{color:inherit;box-sizing:border-box}
body,pre{padding:1rem}
body{font:1.1rem/1.4 sans-serif;max-width:39rem;margin:auto}
pre{overflow:auto;font-size:1rem;border:1px solid}
blockquote{font:italic 1rem serif}
img{max-width:100%}
a:hover{font-weight:700}

alt 2 : fix headers

*{color:inherit;box-sizing:border-box}
body,pre{padding:1rem}
body{font:1.1rem/1.4 sans-serif;max-width:39rem; margin:auto}
pre{overflow:auto;font-size:1rem;border:1px solid}
blockquote{font:italic 1rem serif}
img{max-width:100%}
h1,h2,h3{line-height:1.1}

What I actually use

Here is a link to my actual CSS

• box-sizing: fix how width are set
• max-width to 100% for everything, img, video or others
• links are a bit wider but not bold neither.