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. 3.

    How does CSS work? • Set of Rules, that •

    Select elements in a document, and • Change their visual Properties Friday, February 24, 2012
  2. 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
  3. 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
  4. 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
  5. 12.

    Selecting Many Things em, p.important, #super • <em> • <p

    class=”important”> • <div id=”super”> Friday, February 24, 2012
  6. 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
  7. 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
  8. 21.

    Change text color .red { color: red; } .blue {

    color: #0000aa; } .green { color: rgba(0, 200, 0); } Friday, February 24, 2012
  9. 24.
  10. 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
  11. 26.

    And so much moar! • Think about what you want

    • Shapes, sizes, colors, orientations, etc. • http://www.csszengarden.com/ Friday, February 24, 2012
  12. 28.

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

    • <span> - For separating sections of text Friday, February 24, 2012
  13. 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
  14. 30.

    Conclusion • Makes HTML pretty • CSS is a set

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