Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS Study Group 1

Kerrick Long
November 06, 2014

CSS Study Group 1

Kerrick Long

November 06, 2014
Tweet

More Decks by Kerrick Long

Other Decks in Programming

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