CSS Study Group 1

Transcript

1. SELECTORS & RULES, CSS STUDY GROUP INHERITANCE & SPECIFICITY
2. Kerrick Long Things I make and do Where to find me online meetup.com/STLEmber Lead Front-end Developer at Second Street www.KerrickLong.com twitter.com/KerrickLong github.com/Kerrick
3. selector { property: value; property: value; }
4. SELECTORS & RULES SELECTORS
5. CSS SELECTORS HTML ELEMENTS SELECT
6. BASIC SELECTORS <h1 class="hello world" id="intro" > Example </h1> * /* Universal */ h1 /* Type */ .hello /* Class */ .world /* Class */ #intro /* ID */
7. selector { }
8. MULTIPLE SELECTORS <h1 class="hello world" id="intro" > Example </h1> h1#intro #intro.world .hello.world .world.hello h1.hello
9. ATTRIBUTE SELECTORS <h1 class="hello world" id="intro" data-foo="bar-qux" data-bar="foo baz" > Example </h1> h1[data-foo] h1[data-foo="bar-qux"] h1[data-bar~="baz"] h1[data-foo|="bar"] h1[data-foo^="b"] h1[data-bar$="z"] h1[data-foo*="ar"]
10. <a href="/example/"> Example </a> a:link a:visited a:hover a:active a:focus PSEUDO-CLASS SELECTORS
11. <input disabled /> <input checked type="checkbox" /> input:disabled input:enabled input:checked PSEUDO-CLASS SELECTORS
12. h1:first-of-type h1:last-of-type h1:only-of-type h1:nth-of-type(5) h1:first-child h1:last-child h1:only-child h1:nth-child(3) PSEUDO-CLASS SELECTORS
13. PSEUDO-CLASS SELECTORS <h1 class="goodbye"> Example </h1> <h2></h2> h1:not(.hello) h2:empty
14. PSEUDO-ELEMENTS <h1>Example</h1> <h2> ::before Example ::after </h2> <h3>Example</h3> <p>Lorem Ipsum…</p> h2::before h2::after p::first-line p::first-letter
15. COMBINATORS <h1>Foo <h2>Bar <h3>Baz</h3> </h2> </h1> <h4>Quux</h4> <h6>Bang</h6> h1 h3 /* Descendant */ h1 > h2 /* Child */ h1 + h4 /* Adjacent Sibling */ h1 ~ h6 /* General Sibling */
16. SELECTORS & RULES RULES
17. CSS RULES SPECIFIC STYLES APPLY
18. selector } property: value; property: value;
19. BACKGROUND PROPERTIES background-color background-image background-repeat background-attachment background-position /* Short-hand */ background
20. BACKGROUND PROPERTIES background-color background-image background-repeat background-attachment background-position /* Short-hand */ background
21. COLOR PROPERTIES color opacity
22. TEXT PROPERTIES text-align text-decoration text-indent text-transform line-height letter-spacing word-spacing white-space
23. FONT PROPERTIES font-family font-style font-variant font-weight font-size /* Short-hand */ font
24. WIDTH MARGIN BORDER PADDING CONTENT CONTENT-BOX
25. WIDTH MARGIN BORDER PADDING CONTENT BORDER-BOX
26. BORDER PROPERTIES border-width border-(TRBL)-width border-color border-(TRBL)-color border-style border-(TRBL)-style /* Short-hand */ border
27. MARGIN PROPERTIES margin-top margin-right margin-bottom margin-left /* Short-hand */ margin /* TRBL - Trouble! */ margin: 1px 2px 3px 4px; margin: 1px 2px; margin: 1px;
28. PADDING PROPERTIES padding-top padding-right padding-bottom padding-left /* Short-hand */ padding /* TRBL - Trouble! */ padding: 1px 2px 3px 4px; padding: 1px 2px 3px; padding: 1px 2px; padding: 1px;
29. LIST PROPERTIES list-style-type list-style-image list-style-position /* Short-hand */ list-style
30. BOX SIZE PROPERTIES width min-width max-width height min-height max-height
31. VISUAL PROPERTIES display float clear overflow cursor position top right bottom left
32. INHERITANCE & SPECIFICITY INHERITANCE
33. INHERITANCE <h1>Foo <h2>Bar <h3>Baz</h3> </h2> </h1> <h2>Quux</h2> <h3>Bang</h3> h1 { color: red; }
34. INHERITANCE & SPECIFICITY SPECIFICITY
35. SPECIFICITY 0 0 0 0 STYLE="" #ID TYPE .CLASS, :PSEUDO-CLASS MOST SPECIFIC LEAST SPECIFIC
36. 0 1 3 1 STYLE="" #ID TYPE .CLASS, :PSEUDO-CLASS a#login.active.button:hover
37. 0 2 0 0 STYLE="" #ID TYPE .CLASS, :PSEUDO-CLASS #header img#logo
38. 0 2 0 0 0 1 3 1 WHICH IS MORE SPECIFIC?
39. 0 2 0 0 0 WHICH IS MORE SPECIFIC?