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

Ryan Sandor Richards - CSS WOW

Ryan Sandor Richards - CSS WOW

Ryan's slides from RailsBridge Workshop #31 demystifying CSS.

Be sure to check out OMG HTML http://speakerdeck.com/u/nuclearsandwich/p/ryan-sandor-richards-omg-html

4698d387cdde58a95c8dc7f8d198cb48?s=128

Steven! Ragnarök

February 25, 2012
Tweet

Transcript

  1. CSS Cascading Style Sheets Friday, February 24, 2012

  2. What does CSS do? (extreme makeover CSS edition) Friday, February

    24, 2012
  3. How does CSS work? • Set of Rules, that •

    Select elements in a document, and • Change their visual Properties Friday, February 24, 2012
  4. A Rule span.important { font-weight: bold; font-style: italic; font-size: 48px;

    } Friday, February 24, 2012
  5. Selector span.important { font-weight: bold; font-style: italic; font-size: 48px; }

    Friday, February 24, 2012
  6. Properties span.important { font-weight: bold; font-style: italic; font-size: 48px; }

    Friday, February 24, 2012
  7. Rule = Selector + Properties Friday, February 24, 2012

  8. SELECTORS Friday, February 24, 2012

  9. Selecting By Tag • p { ... } - All

    <p> tags in the document • body { ... } - The document’s <body> tag • h2 { ... } - All <h2> tags in the document • em { ... } - All the <em> tag • ul { ... } - All the <ul> tags Friday, February 24, 2012
  10. Selecting By Id • #funny - Selects the one element

    in the document with an id=”funny” • p#neat - Selects <p id=”neat”> • h3#uber - Selects <h3 id=”uber”> Friday, February 24, 2012
  11. Selecting by Class • .cool - Selects all elements that

    have the class “cool” • em.red - Selects only <em> tags that have the class “red” • p.lawyer-talk - Selects only <p> tags that have the class “lawyer-talk” Friday, February 24, 2012
  12. Selecting Many Things em, p.important, #super • <em> • <p

    class=”important”> • <div id=”super”> Friday, February 24, 2012
  13. Friday, February 24, 2012

  14. Selecting Nested Things! div#header p em.red <div id=”header”> <em>OMGWOW</em> <p>

    This is <em>so</em> cool. </p> <p> Well, <em>I</em> think so... </p> </div> Friday, February 24, 2012
  15. All together now... strong.blue, p em, div#yes h2 em.blue Friday,

    February 24, 2012
  16. PROPERTIES Friday, February 24, 2012

  17. Property Anatomy font-family: Helvetica; Name Value Friday, February 24, 2012

  18. Property Anatomy font-size: 20px; Name Value Friday, February 24, 2012

  19. Values • 20px • bold • url(“images/tyler_hair.jpg”) • “Lucida Grande”

    Friday, February 24, 2012
  20. Tons of Properties • Online documentation is really good •

    IMPOSSIMPIBLE TO EXPLAIN THEM ALL • But we can at least give some practical examples... Friday, February 24, 2012
  21. Change text color .red { color: red; } .blue {

    color: #0000aa; } .green { color: rgba(0, 200, 0); } Friday, February 24, 2012
  22. Change Font Size font-size: 20px; font-size: 120%; font-size: 2em; Friday,

    February 24, 2012
  23. Padding! padding-top: 20px; padding-right: 40px; padding-bottom: 6px; padding-left: 2px; padding:

    20px 40px 6px 2px; OR Friday, February 24, 2012
  24. Background background-color: blue; background-image: url(tyler_hair.jpg); background-position: top left; background-repeat: no-repeat;

    background: blue url(tyler_hair.jpg) top left no-repeat; OR Friday, February 24, 2012
  25. Borders border-top: 1px solid green; border-right: 5px dotted blue; border-bottom:

    3px dashed rgba(0, 0, 0, 0.5); border-left: 20px solid black; Friday, February 24, 2012
  26. And so much moar! • Think about what you want

    • Shapes, sizes, colors, orientations, etc. • http://www.csszengarden.com/ Friday, February 24, 2012
  27. (Breath) Friday, February 24, 2012

  28. Special HTML • <div> - For sectioning off the document

    • <span> - For separating sections of text Friday, February 24, 2012
  29. Special HTML Examples <div id=”header”> <h1>This is my page</h1> </div>

    <p> This is <span class=”important”>MY</span> page. </p> Friday, February 24, 2012
  30. Conclusion • Makes HTML pretty • CSS is a set

    of rules • Rule = Selector + Properties • Complicated but not impossimpible Friday, February 24, 2012
  31. Friday, February 24, 2012