HTML/CSS

to merge from bits of design.

Specificity

p has a specificity of 1 (1 HTML)
div p has a specificity of 2 (2 HTML; 1+1)
.sith has a specificity of 10 (1 class)
div p.sith has a specificity of 12 (2 HTML and a class; 1+1+10)
#sith has a specificity of 100 (1 id)
body #darkside .sith p has a specificity of 112 (HTML, id, class, HTML; 1+100+10+1)

[1] [2] ([3])

• http://twostepmedia.co.uk/cssselectors/
• http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

Positioning

display: block - default 100% width, flows vertically
display: inline - consumes width of content, flows horizontally
display: inline-block
  http://www.quirksmode.org/css/display.html

float - floats element next to containing box or other floated element

position: absolute - out of flow

• Google HTML/CSS/Javascript from the Ground Up Class: CSS Walkthrough

rgba(0, 0, 0, 0.2) - shadow

Tips

• http://paulirish.com/2012/box-sizing-border-box-ftw/ [4]

Responsive

• http://webdesignerwall.com/tutorials/css-elastic-videos
• http://drupal.org/node/1535954

background

• http://whereswalden.com/files/mozilla/background-size/more-examples.html

• http://www.impressivewebs.com/image-tint-blend-css/

Animations & transitions

• http://www.jasondavies.com/animated-bezier/

Resets, etc.

• https://github.com/necolas/normalize.css/wiki [5]
  • http://nicolasgallagher.com/about-normalize-css/

• http://html5boilerplate.com/docs/css/

Grid

• http://blog.centresource.com/2009/06/15/6-tips-and-tricks-for-designing-with-960/
• http://divitodesign.com/css/tricks-to-solve-960-css-framework-problems/

Vertical rhythm

• The Elements of Typographic Style Applied to the Web
  • Vertical Motion
• http://24ways.org/2006/compose-to-a-vertical-rhythm - oft' linked to

• http://www.gridlover.net/
• http://drewish.com/tools/vertical-rhythm

• https://github.com/pyrsmk/vertical-rhythmic - sass mixins (no sure if worth it)

Typography

• CSS with vertical rhythm - drewish.com
• Scale & Rhythm

Font symbols

• http://news.ycombinator.com/item?id=3672526
• http://news.ycombinator.com/item?id=3675301

Sprites

• http://www.phpied.com/command-line-css-spriting/

Header, footer

• http://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the-page-with-a-minimum-height

Menus

• http://stackoverflow.com/questions/2865380/how-do-i-center-align-horizontal-ul-menu

Gradients

• ColorZilla Ultimate CSS Gradient Generator

Misc

• http://mathiasbynens.be/notes/css-without-html