High SNR, mini­mum ver­biage CSS code recipes.

1. Super­scripts and sub­scripts without brea­king line spacing
2. Ideal line length: 66 characters
3. Let­ters­pa­cing abbreviations
4. Consis­tency bet­ween line spa­cing and para­graph spacing
5. Consis­tency for blo­ck­quote margins
6. Consis­tency for hea­ding size
7. Para­graph indent (exclu­sive with block paragraphs)
8. Fai­th­ful ren­de­ring of verses, cen­te­red on the lon­gest line
9. Ita­li­cise foreign words (French and English)
10. Force white back­ground when printing
11. Clo­sing a float with mini­mal markup
12. High­light variables
13. High­light input
14. Loca­li­sed quo­ta­tions (French and English)
15. Inline pairs (French and English)
16. Post-It™
17. Dia­logs (French and English)

---

Super­scripts and sub­scripts without brea­king line spacing

sup, sub {line-height:1px}

example | source

Ideal line length: 66 characters

max-width:44em

example | source

Let­ters­pa­cing abbreviations

abbr {letter-spacing:0.1em}

example | source

Consis­tency bet­ween line spa­cing and para­graph spacing

p {
	line-height:x;
	margin-top:xem;
	margin-bottom:xem
}

example | source

Consis­tency for blo­ck­quote margins

blockquote {margin:xem }

example | source

Consis­tency for hea­ding size

No code yet, sorry! source

Para­graph indent (exclu­sive with block paragraph)

p+p {text-indent:0}

source

Fai­th­ful ren­de­ring of verses, cen­te­red on the lon­gest line:

blockquote.verse pre { display:table; font-family:inherit; margin:0 auto; width:auto }

source

Ita­li­cise foreign words (French and English)

html:lang(fr) *:not(:lang(fr)), html:lang(en) *:not(:lang(en)) { font-style: italic }

source

Force white back­ground when printing

<style type="text/css" media="print"> * { background:#fff !important; color:#000 !important }

source

Clo­sing a float without extra markup

.bla:after {content:"";display:block;clear:both}

source

High­light variables

var {
  font-family:Courier,monospace;
  font-style:normal
}

var:before {
content:"\003C"
}

var:after {
content:"\003E"
}

source

High­light input

kbd { border:1px solid silver; font-size:0.90em; padding:0 0.25em }

source

Loca­li­sed quo­ta­tions (French and English)

q:lang(fr) {quotes : '«\202F' '\202F»' "“" "”" "‘" "’"}
q:lang(en) {quotes : "“" "”" "‘" "’"}

source

Inline pairs (French and English)

dl.run-in, dl.run-in dd			{margin:0}
dl.run-in dt, dl.run-in dt:after	{font-weight:bold}
dl.run-in dt				{display:run-in}
dl:lang(en).run-in.colon dt:after	{content:": "}
dl:lang(fr).run-in.colon dt:after	{content:"\00a0: "}

example | source

Post-It™

.post-it {
    background:#ffffa1;
    border:thin solid #ffc700;
    font-family:cursive;
    margin:0 25% 0 25%;
    padding:.5em;
    width:30%
}

example | source

Dia­logs (French and English)

ul                          {list-style:none}
ul li q:lang(fr)            {quotes : '«\202F' '\202F»' "“" "”" "‘" "’"}
ul li q:lang(en)            {quotes : "“" "”" "‘" "’"}
ul li:first-child q:before  {content:open-quote}
ul li:first-child q:after   {content:no-close-quote}
ul li q:before              {content:no-open-quote'\2012';padding-right:0.5em}
ul li q:after               {content:no-close-quote}
ul li:last-child q:after    {content:close-quote}

example | source