CSS Study Group 1

Transcript

1. SELECTORS & RULES,
   CSS STUDY GROUP
   INHERITANCE & SPECIFICITY
   

   View Slide

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
   

   View Slide

3. selector {
   property: value;
   property: value;
   }
   

   View Slide

4. SELECTORS & RULES
   SELECTORS
   

   View Slide

5. CSS SELECTORS
   HTML ELEMENTS
   SELECT
   

   View Slide

6. BASIC SELECTORS
   class="hello world"
   id="intro"
   >
   Example
   
   * /* Universal */
   h1 /* Type */
   .hello /* Class */
   .world /* Class */
   #intro /* ID */
   

   View Slide

7. selector {
   }
   

   View Slide

8. MULTIPLE SELECTORS
   class="hello world"
   id="intro"
   >
   Example
   
   h1#intro
   #intro.world
   .hello.world
   .world.hello
   h1.hello
   

   View Slide

9. ATTRIBUTE SELECTORS
   class="hello world"
   id="intro"
   data-foo="bar-qux"
   data-bar="foo baz"
   >
   Example
   
   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"]
   

   View Slide

10. 
    Example
    
    a:link
    a:visited
    a:hover
    a:active
    a:focus
    PSEUDO-CLASS SELECTORS
    

    View Slide

11. 
    type="checkbox" />
    input:disabled
    input:enabled
    input:checked
    PSEUDO-CLASS SELECTORS
    

    View Slide

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
    

    View Slide

13. PSEUDO-CLASS SELECTORS
    
    Example
    
    
    h1:not(.hello)
    h2:empty
    

    View Slide

14. PSEUDO-ELEMENTS
    Example
    
    ::before
    Example
    ::after
    
    Example
    Lorem Ipsum…
    h2::before
    h2::after
    p::first-line
    p::first-letter
    

    View Slide

15. COMBINATORS
    Foo
    Bar
    Baz
    
    
    Quux
    Bang
    h1 h3 /* Descendant */
    h1 > h2 /* Child */
    h1 + h4 /* Adjacent
    Sibling */
    h1 ~ h6 /* General
    Sibling */
    

    View Slide

16. SELECTORS & RULES
    RULES
    

    View Slide

17. CSS RULES
    SPECIFIC STYLES
    APPLY
    

    View Slide

18. selector
    }
    property: value;
    property: value;
    

    View Slide

19. BACKGROUND PROPERTIES
    background-color
    background-image
    background-repeat
    background-attachment
    background-position
    /* Short-hand */
    background
    

    View Slide

20. BACKGROUND PROPERTIES
    background-color
    background-image
    background-repeat
    background-attachment
    background-position
    /* Short-hand */
    background
    

    View Slide

21. COLOR PROPERTIES
    color
    opacity
    

    View Slide

22. TEXT PROPERTIES
    text-align
    text-decoration
    text-indent
    text-transform
    line-height
    letter-spacing
    word-spacing
    white-space
    

    View Slide

23. FONT PROPERTIES
    font-family
    font-style
    font-variant
    font-weight
    font-size
    /* Short-hand */
    font
    

    View Slide

24. WIDTH
    MARGIN BORDER PADDING CONTENT
    CONTENT-BOX
    

    View Slide

25. WIDTH
    MARGIN BORDER PADDING CONTENT
    BORDER-BOX
    

    View Slide

26. BORDER PROPERTIES
    border-width
    border-(TRBL)-width
    border-color
    border-(TRBL)-color
    border-style
    border-(TRBL)-style
    /* Short-hand */
    border
    

    View Slide

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;
    

    View Slide

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;
    

    View Slide

29. LIST PROPERTIES
    list-style-type
    list-style-image
    list-style-position
    /* Short-hand */
    list-style
    

    View Slide

30. BOX SIZE PROPERTIES
    width
    min-width
    max-width
    height
    min-height
    max-height
    

    View Slide

31. VISUAL PROPERTIES
    display
    float
    clear
    overflow
    cursor
    position
    top
    right
    bottom
    left
    

    View Slide

32. INHERITANCE & SPECIFICITY
    INHERITANCE
    

    View Slide

33. INHERITANCE
    Foo
    Bar
    Baz
    
    
    Quux
    Bang
    h1 {
    color: red;
    }
    

    View Slide

34. INHERITANCE & SPECIFICITY
    SPECIFICITY
    

    View Slide

35. SPECIFICITY
    0 0 0 0
    STYLE="" #ID TYPE
    .CLASS,
    :PSEUDO-CLASS
    MOST SPECIFIC LEAST SPECIFIC
    

    View Slide

36. 0 1 3 1
    STYLE="" #ID TYPE
    .CLASS,
    :PSEUDO-CLASS
    a#login.active.button:hover
    

    View Slide

37. 0 2 0 0
    STYLE="" #ID TYPE
    .CLASS,
    :PSEUDO-CLASS
    #header img#logo
    

    View Slide

38. 0 2 0 0
    0 1 3 1
    WHICH IS MORE SPECIFIC?
    

    View Slide

39. 0 2 0 0
    0
    WHICH IS MORE SPECIFIC?
    

    View Slide