HTML/CSS

From Things and Stuff Wiki
Jump to navigation Jump to search


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])

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
rgba(0, 0, 0, 0.2) - shadow

Tips

Responsive

background

Animations & transitions

Resets, etc.

Grid

Vertical rhythm

Typography

Font symbols

Sprites

Header, footer

Menus

Gradients

Misc