Joplin Specific: Joplin's in-app CSS file is ~/.config/joplin-desktop/userstyle.css

CSS Examples

• Water is a nice, super-easy drop in CSS file.
  • https://kognise.github.io/water.css/
  • Don't love the font, but it's alright. Maybe changeable
• 58 Bytes That Look Good Anywhere
  • https://jrl.ninja/etc/1/

max-width: 38rem;
  padding: 2rem;
  margin: auto;
}

max-width: 38rem;
  padding: 2rem;
  margin: auto;
}

• Peter Michaux's site - home of the Bootstrap Scheme series
  • Nice clean HTML, minimal styling
  • http://peter.michaux.ca/articles/scheme-from-scratch-introduction
• https://www.ft.io/blog/good-website/
  • Guidelines for making your own simple HTML+CSS site
• Super simple site. All CSS is in a couple lines at the top
  • https://shachaf.net/w/b-trees
  • <style>main{margin:40px auto;padding:0 10px;max-width:60em;line-height:1.25;font-size:12pt}h1{line-height:1}footer hr{border-top:1px solid #ccc}footer p{font-size:8pt;color:#777}footer p a{color:#66a}</style>

main{
    margin:40px auto;
    padding:0 10px;
    max-width:60em;
    line-height:1.25;
    font-size:12pt
}
h1{line-height:1}
footer hr{border-top:1px solid #ccc}
footer p{font-size:8pt;color:#777}
footer p a{color:#66a}

main{
    margin:40px auto;
    padding:0 10px;
    max-width:60em;
    line-height:1.25;
    font-size:12pt
}
h1{line-height:1}
footer hr{border-top:1px solid #ccc}
footer p{font-size:8pt;color:#777}
footer p a{color:#66a}

HTML Elements

Summarized from here.

• <pre> - puts text in monospace and respects linebreaks

• <code> - not sure what what this is for, but best practice seems to be <pre><code> ...code.. </pre></code>

• <kbd> - for demarking keyboard input. Just puts text in monospace

• <samp> - for demarking sample program output. Again, just puts text in monospace

• Minimal HTML Tips - cool stuff about what you can actually do in practice, and an explanation of the mobile viewport thing

  • The HN Comments are actually really good too, especial the advice not to follow