CSS Cheatsheet

Table of Content

font

/* font-size and font-family are required. rest is optional. */
body {
  font: font-style font-variant font-weight font-size/line-height font-family;
}

Individual properties:

body {
  font-style: normal|italic|oblique|initial|inherit;
}

Example:

body {
  font: italic small-caps normal 16px/150% Arial, Helvetica, sans-serif;
}

Text:

* {
  text-transform: capitalise|lowercase|uppercase;
  text-decoration: none|underline|overline|line-through;
  text-indent: 25px; /* indent first line */
  text-align: left|right|center|justify;
  text-rendering: auto|optimizeSpeed|optimizeLegibility|geometricPrecision;

  line-height: 1.5;
  letter-spacing: 1px;
  word-spacing: 5px;
}

Text shadow:

p {
  text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;
}

/* examples */

p { text-shadow: 1px 1px 1px #000; }
p { text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; }

References:

nth-child

Special cases

First child

li:first-child {}
/* or */
li:nth-child(1) {}

Last child

li:last-child {}

Odd & Even children

li:nth-child(odd) {}  /* 1, 3, 5, 7, etc. */
li:nth-child(even) {} /* 2, 4, 5, 6, etc. */

flex

Flex container:

.container {
  display: flex;
  flex-direction: row|row-reverse|column|column-reverse;
  flex-wrap: nowrap|wrap|wrap-reverse;
  /* short hand for flex-direction and flex-wrap */
  flex-flow: flex-direction flex-wrap; /* default row nowrap */
  justify-content: flex-start|flex-end|center|space-between|space-around;
  align-items: flex-start|flex-end|center|baseline|stretch;
  align-content: flex-start|flex-end|center|space-between|space-around|stretch;
}

Flex items:

.item {
  order: <integer>;
  flex-grow: <number>; /* default 0 */
  flex-shrink: <number>; /* default 1 */
  flex-basis: <length>|auto; /* default auto */

  /* flex-grow is required, rest is optional */
  flex: none | flex-grow flex-shrink flex-basis; /* default 0 1 auto */

  /* Override container align-items */
  align-self: auto|flex-start|flex-end|center|baseline|stretch;
}

Snippets

pre tag text wrap

pre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

Text rendering: (no IE support) [see more]

* {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Selection

::-moz-selection { background: #FDFB8C; }
::selection { background: #FDFB8C; }

Full Page Background Image

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

resources