Difference between revisions of "HTML/CSS"
Jump to navigation
Jump to search
| Line 1: | Line 1: | ||
{{techy}} | {{techy}} | ||
| − | == | + | === Specificity === |
tag | tag | ||
.class | .class | ||
#id | #id | ||
| + | |||
| + | p has a specificity of 1 (1 HTML selector) | ||
| + | div p has a specificity of 2 (2 HTML selectors; 1+1) | ||
| + | .sith has a specificity of 10 (1 class selector) | ||
| + | div p.sith has a specificity of 12 (2 HTML selectors and a class selector; 1+1+10) | ||
| + | #sith has a specificity of 100 (1 id selector) | ||
| + | body #darkside .sith p has a specificity of 112 (HTML selector, id selector, class selector, HTML selector; 1+100+10+1) [http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html] ([http://www.stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg]) | ||
| + | |||
| + | === Positioning === | ||
display: block - default 100% width, flows vertically | display: block - default 100% width, flows vertically | ||
Revision as of 15:14, 10 March 2012
Specificity
tag .class #id
p has a specificity of 1 (1 HTML selector) div p has a specificity of 2 (2 HTML selectors; 1+1) .sith has a specificity of 10 (1 class selector) div p.sith has a specificity of 12 (2 HTML selectors and a class selector; 1+1+10) #sith has a specificity of 100 (1 id selector) body #darkside .sith p has a specificity of 112 (HTML selector, id selector, class selector, HTML selector; 1+100+10+1) [1] ([2])
![[2]](http://www.stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg){kind=link}
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
background
Resets, etc.
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
- http://24ways.org/2006/compose-to-a-vertical-rhythm - oft' linked to
- https://github.com/pyrsmk/vertical-rhythmic - sass mixins (no sure if worth it)
Typography
- CSS with vertical rhythm - drewish.com
- Scale & Rhythm