CSS snippets

High SNR, minimum verbiage CSS code recipes.

NEW!: check out this great CSS snippets compilation

  1. Superscripts and subscripts without breaking line spacing
  2. Ideal line length: 66 characters
  3. Letterspacing abbreviations
  4. Consistency between line spacing and paragraph spacing
  5. Consistency for blockquote margins
  6. Consistency for heading size
  7. Paragraph indent (exclusive with block paragraphs)
  8. Faithful rendering of verses, centered on the longest line
  9. Italicise foreign words (French and English)
  10. Force white background when printing
  11. Closing a float with minimal markup
  12. Highlight variables
  13. Highlight input
  14. Highlight code
  15. Localised quotations (French and English)
  16. Inline pairs (French and English)
  17. Post-It™
  18. Dialogs (French and English)
  19. Drop Caps
  20. Multiple columns CSS dashed list
  21. Tables with centered text in merged columns

Superscripts and subscripts without breaking line spacing

sup, sub {line-height:1px}

example | source

Ideal line length: 66 characters

max-width:44em

example | source

Letterspacing abbreviations

abbr {letter-spacing:0.1em}

example | source

Consistency between line spacing and paragraph spacing

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

example | source

Consistency for blockquote margins

blockquote {margin:xem }

example | source

Consistency for heading size

No code yet, sorry! source

Paragraph indent (exclusive with block paragraph)

p+p {text-indent:0}

source

Faithful rendering of verses, centered on the longest line:

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

source

Italicise foreign words (French and English)

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

source

Force white background when printing

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

source

Closing a float without extra markup

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

source

Highlight variables


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

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

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

source

Highlight input

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

source

Highlight code

code strong {background:#FFF2CC}

source

Localised quotations (English, French, German and Spanish)


/* http://david.latapie.name/blog/localised-quotations/ */
q:before { content: open-quote; }
q:after  { content: close-quote; }
*:lang(de) > * { quotes: "\201E" "\201C"; }	/* German */
*:lang(en) > * { quotes: "\201C" "\201D" "\2018" "\2019"; }	/* English */
*:lang(es) > * { quotes: "\00AB" "\00BB"; }	/* Spanish */
*:lang(fr) > * { quotes: "\00AB\202F" "\202F\00BB" "\201C" "\201D" "\2018" "\2019"; } /* French */

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

Dialogs (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

Drop caps on the first letter of the first paragraph

p:first-child:first-letter {
    color:#903;
    float:left;
    font-family:Georgia;
    font-size:75px;
    line-height:60px;
    padding-top:4px;
    padding-right:8px;
    padding-left:3px
}
Areas for improvement: convert px to ex (or em), exemplify with borders, background and a Google Webfont's unifraktur.

example | source

Multiple columns CSS dashed list


.columnlist {
	margin:1em 0;
	padding-left:1em;
	-moz-column-count:2;-webkit-column-count:2;column-count:2;
	-moz-column-gap:2.5em;-webkit-column-gap:2.5em;column-gap:2.5em
}

.multilistdash {
	margin:1em 0;
	padding-left:1em
}
		
.multilistdash li {
	display:inline-block;
	*display:inline /*The leading asterisk is an IE workaround*/;
	*zoom:1 /*The leading asterisk is an IE workaround*/;
	width:100%;
	padding-left:2em;
	text-indent:-2em
}

.multilistdash li:before {
	content:'\2014';
	margin-right:0.75em;
	font-weight:bold;
	font-size:1.3em
}
		
.multilistdash ul {margin-left:0}
.multilistdash li li {display:block;}
.multilistdash li li:before {content:'\2014 ';}

	@media only screen and (min-width:48em) {
		.multilistdash {
		-moz-column-count:2;-webkit-column-count:2;column-count:2;
		-moz-column-gap:2.5em;-webkit-column-gap:2.5em;column-gap:2.5em
		}
	}

	@media only screen and (min-width:48em) {
		.multilistdash {
		-moz-column-count:3;-webkit-column-count:3;column-count:3;
		-moz-column-gap:2.5em;-webkit-column-gap:2.5em;column-gap:2.5em
		}
	}

example | source

Tables with centered text in merged columns

td[colspan]	{text-align:center}

(this is called conditional styling)

(no example) | source

flattr this!