289 bytes of css only explained
Below are the few CSS instructions I use for my website.
- No color, use user preferences
- Use relative size, scale on any screen, let the reader resize. Just make sure to have "<meta name="viewport" content="width=device-width, initial-scale=1" />" in header.
body, pre, blockquote { padding: 1rem; }
Set inner margin to avoid eye stress.
body {
font: 1.2rem/1.4 sans-serif;
max-width: 38rem;
margin: auto;
}
Set a bigger font for readabillity (1.2rem)
Increase line height (1.4) to let the text breathe and help people with dyslexia.
Avoid too long lines (37rem), which is around 74 char so less than 80. 1ch ≈ 0.5em. I use rem unit instead of ch since it is better handled by minimalistic browsers such as netsurf.
Margin is here to center the text.
a { text-decoration: none; }
I find underline hard to read. Yes, it is personal preference...
Instead, I add a tiny arrow after the link so it can be identified.
Again, no color specified, let the user setup his browser.
pre {
overflow: auto;
font-size: .9rem;
border: 1px solid;
}
Use a scroll if width it too wide (overflow).
Reduce the font size (personal preference). One may use "smaller" instead.
Add a border.
blockquote { border-left: 3px solid; }
Add a border to identify quotes.
img { max-width: 100%; }
Just make sure big pictures are responsive.
To handle videos, use "img,video".
The whole sheet :
body, pre, blockquote { padding: 1rem; }
body {
font: 1.2rem/1.4 sans-serif;
max-width: 40rem;
margin: auto;
}
a { text-decoration: none; }
pre {
overflow: auto;
font-size: .9rem;
border: 1px solid;
}
blockquote { border-left: 3px solid; }
img { max-width: 100%; }