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?