CSS Study Group 1

2956e2cd2664630aa968b92bbb645f2f?s=47 Kerrick Long
November 06, 2014

CSS Study Group 1

2956e2cd2664630aa968b92bbb645f2f?s=128

Kerrick Long

November 06, 2014
Tweet

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?