18. Specificity Definition:
Selector specificity is a process used to
determine which rules take precedence in
CSS when several rules could be applied to
the same element in markup.
19. Specificity Hierarchy
1. Inline styles
(i.e. <div style=“font-weight:bold;”>)
2. ID Selectors
(i.e. #header, #footer )
3. Class Selectors
(i.e. .blogger, .selected )
4. Element Selectors
(i.e. blockquote, div )
20. Calculating Specificity
Start With Value: 0,0,0,0
Element Selector Class Selector
Value: 0,0,0,1 Value: 0,0,1,0
Example: div Example: .vador
ID Selector
Value: 0,1,0,0
Example: #header
21. Calculating Specificity
Which is Greater?
0,0,0,1 > 0,0,0,0
0,0,0,2 > 0,0,0,1
0,0,1,0 > 0,0,0,15
0,2,0,0 > 0,1,99,99
22.
23. Specificity Hierarchy
1. Equal Specificity - Use Last Rule
html p { color:red; }
div p { color: blue; } /* Will Use This One */
2. Unequal Specificity - Use More Specific Rule
#content h1 { font-size: 30px; } /* Will Use */
body h1 { font-size:20px; }
24. Don’t Panic!
Tools To Help You:
FireBug - FireFox
Developer Tools - Chrome
61. Floating Properties
1. The “float” attribute can have values of “right, left, inherit, and
none.”
2. The block element will shift to the left or right of the content.
3. The parent element’s content will flow around the element
(unless they use the “clear” attribute).
4. The floated element is removed from the Normal Flow.