Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Pro CSS                  Simple, kludge free web designTuesday, January 29, 13
Agenda                   CSS Selectors                   CSS Properties                   Page Layouts                   T...
CSS SelectorsTuesday, January 29, 13
Class Selector                   Selects all elements having a class attribute    CSS            img.thumb { width: 32px; ...
ID Selector                   Select a node based on id    CSS             #content { width: 960px; margin: 0 auto; }    H...
Descendants Selector                   Select all descendants of the given element    CSS                   .gallery img {...
Child Selector                   Select a direct child.                   CSS2.1 Selector. IE8 and above     CSS          ...
Attribute Selector                   Select an element with a specific attribute                   CSS2.1 Selector. IE7 And...
Enter CSS3                   More selectors                   Less clutter in HTMLTuesday, January 29, 13
Advanced Attribute                   Select an attribute that “starts with”                   IE7 and above               ...
Advanced Attribute                   Select an attribute that “ends with”                   IE7 and above     CSS         ...
Pseudo Selectors                   :first-child                   :last-child                   :nth-child, :nth-of-type   ...
:nth-child        td { padding: 2px; }        tr td:first-child { width: 100px; }        tr:nth-child(2n) { background: #c...
:nth-child                   An element that has an+b-1 siblings before in                   the document tree            ...
:nth-of-type                   Has an+b-1 siblings with the same expanded                   element name before           ...
Psudo Elements                   Create abstractions about the document tree                   beyond html                ...
Drop Caps                   p { margin-top: 20px; }                   p::first-letter {                       font: 2em za...
:before and :afterTuesday, January 29, 13
Demos:                   Intro: http://jsfiddle.net/kcYUM/1/                   Shapes: http://css-tricks.com/examples/     ...
Lab                                            All 3 A’s together                   Write a CSS selector      <body>      ...
CSS ConflictsTuesday, January 29, 13
What Happens Here ?      CSS                 p    { color: red; }                          .foo { color: blue; }    HTML  ...
What Happens Here ?      CSS                 p    { color: red; }                          .foo { color: blue; }    HTML  ...
Selector Specificity                   Number of IDs * 100                   Number of class, attributes, pseudo-classes * ...
CSS Faceoff        type              p         .foo        id                0 * 100   0 * 100        classes           0 ...
CSS Faceoff                   Who Wins ?                   #slider                   OR                   .twocol .contain...
CSS Faceoff                                    .twocol .container .primary        type              #slider               ...
CSS Faceoff                   .container .external <=> .container a[rel=”external”]                   div ul li a.item    ...
IE < 9 Shim                   Most interesting                   selectors require a                   modern browser     ...
CSS Properties                   float and positioning                   display: block, inline, inline-block              ...
Floats                   Takes an element out                   of the normal layout                   context            ...
position: absolute                   Draw an element in a                   specific location.                   The elemen...
Display: inline/block                   Block elements occupy an entire line                   Inline elements are placed ...
Demo                   Implementing a top navigation menu with inline-                   blockTuesday, January 29, 13
Lab                   Fill in the CSS to                   create the grid on the                   right                 ...
Page Layouts                   Fixed layout                   Fluid (liquid) layout                   Adaptive layoutTuesd...
Fixed Width Layout                   Usually 960px or 760px wide                   Keep your designers happy              ...
Fluid Width Layouts                   Use percentages for widths                   Can make better use of screen real esta...
Adaptive Layout                   Uses media queries to make a smart decision                   about the layout          ...
Choosing Layout                   Be careful with fluid layouts - easiest to build,                   most difficult to test ...
960 Grid                   For fixed grid layouts, no need to reinvent the                   wheel.                   960gr...
Common CSS                   Centering elements                   Showing/Hiding elements                   Box punching  ...
Centering elements                   Use align: center to                   center text inside a                   block c...
Showing/Hiding                   Elements                   Use display: none to                   completely remove an   ...
Box Punching                   Fiddle: http://                   jsfiddle.net/ynonp/                   PqtkB/1/Tuesday, Jan...
CSS Sprites                   One image file with many small images                   Save bandwidth                   Bett...
Q&ATuesday, January 29, 13
Thank You                   Ynon Perek                   ynon@ynonperek.com                   ynonperek.comTuesday, Januar...
Upcoming SlideShare
Loading in …5
×

03 css

1,385 views

Published on

Writing professional modern CSS for your websites and web applications

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this

03 css

  1. 1. Pro CSS Simple, kludge free web designTuesday, January 29, 13
  2. 2. Agenda CSS Selectors CSS Properties Page Layouts Tips & TricksTuesday, January 29, 13
  3. 3. CSS SelectorsTuesday, January 29, 13
  4. 4. Class Selector Selects all elements having a class attribute CSS img.thumb { width: 32px; height: 32px; } HTML <div class="gallery"> <ul> <li><img class="thumb" src="img1.png" /></li> <li><img class="thumb" src="img2.png" /></li> <li><img class="thumb" src="img3.png" /></li> </ul> </div>Tuesday, January 29, 13
  5. 5. ID Selector Select a node based on id CSS #content { width: 960px; margin: 0 auto; } HTML <div id="content"> </div>Tuesday, January 29, 13
  6. 6. Descendants Selector Select all descendants of the given element CSS .gallery img { border: 2px solid blue; } HTML <div class="gallery"> <ul> <li><img src="img1.png" /></li> <li><img src="img2.png" /></li> <li><img src="img3.png" /></li> </ul> </div>Tuesday, January 29, 13
  7. 7. Child Selector Select a direct child. CSS2.1 Selector. IE8 and above CSS .header > h1 { font-size: 1.8em; font-weight: bold; } HTML <div class="header"> <h1>Welcome Home</h1> <div class="menu"> <h1>About</h1> <h1>Gallery</h1> <h1>Contact</h1> </div> </div>Tuesday, January 29, 13
  8. 8. Attribute Selector Select an element with a specific attribute CSS2.1 Selector. IE7 And above CSS input[type="text"] { border: 2px solid blue; } HTML <form> <input type="text" name="name" /> <input type="text" name="phone" /> <input type="submit" value="Go" /> </form>Tuesday, January 29, 13
  9. 9. Enter CSS3 More selectors Less clutter in HTMLTuesday, January 29, 13
  10. 10. Advanced Attribute Select an attribute that “starts with” IE7 and above a[href^="mailto:"] { CSS background: url(/images/icn-email.png); } HTML <a href="/work">Work</a> <a href="/about">About</a> <a href="mailto:admin@work.com">Contact</a>Tuesday, January 29, 13
  11. 11. Advanced Attribute Select an attribute that “ends with” IE7 and above CSS a[href$="pdf"] { background: url(/images/icn-pdf.png); } HTML <a href="report.pdf">Report</a>Tuesday, January 29, 13
  12. 12. Pseudo Selectors :first-child :last-child :nth-child, :nth-of-type :not :enabled, :disabled, :checkedTuesday, January 29, 13
  13. 13. :nth-child td { padding: 2px; } tr td:first-child { width: 100px; } tr:nth-child(2n) { background: #ccc; } Dollar USA <table>     <tr>         <td>Dollar</td>         <td>USA</td>     </tr>     <tr>         <td>Pound</td> Pound Great Britain         <td>Great Britain</td>     </tr>     <tr>         <td>Yen</td>         <td>Japan</td>     </tr>         <tr>         <td>Euro</td> Yen Japan         <td>EMU</td>     </tr>    </table>Tuesday, January 29, 13
  14. 14. :nth-child An element that has an+b-1 siblings before in the document tree Very useful for zebra tables Can save html classes: first, second, third, etc.Tuesday, January 29, 13
  15. 15. :nth-of-type Has an+b-1 siblings with the same expanded element name before Used for mixed type containersTuesday, January 29, 13
  16. 16. Psudo Elements Create abstractions about the document tree beyond html Goal: Simplify your html ::first-letter, ::first-line, ::before, ::afterTuesday, January 29, 13
  17. 17. Drop Caps p { margin-top: 20px; } p::first-letter {     font: 2em zapfino;     float: left;     margin: -22px 15px 0 0; }Tuesday, January 29, 13
  18. 18. :before and :afterTuesday, January 29, 13
  19. 19. Demos: Intro: http://jsfiddle.net/kcYUM/1/ Shapes: http://css-tricks.com/examples/ ShapesOfCSS/ Multiple borders: http://nicolasgallagher.com/ multiple-backgrounds-and-borders-with-css2/ demo/borders.html Ribbons: http://jsfiddle.net/y5u3k/Tuesday, January 29, 13
  20. 20. Lab All 3 A’s together Write a CSS selector <body>     <nav>         <ul> for each marked             <li><a href="#">Home</a></li>             <li><a href="#">About</a></li> element in the             <li><a href="#">Schedule</a></li>         </ul> following HTML.     </nav>          <div id="page-main">         <article> Test your work by             <p>Pellentesque habitant mor.</p>             <ul> changing background                 <li>Lorem ipsum .</li>                 <li>Aliquam tin.</li>                 <li>Vestibulum .</li> color for the selected             </ul>    <p>Pellentesque habitant mor.</p>      element         </article>     </div> </body> http://jsfiddle.net/ 9GYsp/Tuesday, January 29, 13
  21. 21. CSS ConflictsTuesday, January 29, 13
  22. 22. What Happens Here ? CSS p    { color: red; } .foo { color: blue; } HTML <p class="foo">Hello</p>Tuesday, January 29, 13
  23. 23. What Happens Here ? CSS p    { color: red; } .foo { color: blue; } HTML <p class="foo">Hello</p> RESULT HelloTuesday, January 29, 13
  24. 24. Selector Specificity Number of IDs * 100 Number of class, attributes, pseudo-classes * 10 Number of type, pseudo elements Add it all to get the specificity Selector with the larger specificity winsTuesday, January 29, 13
  25. 25. CSS Faceoff type p .foo id 0 * 100 0 * 100 classes 0 * 10 1 * 10 type 1*1 0*1 total: 1 10Tuesday, January 29, 13
  26. 26. CSS Faceoff Who Wins ? #slider OR .twocol .container .primary .content ulTuesday, January 29, 13
  27. 27. CSS Faceoff .twocol .container .primary type #slider .content ul id 1 * 100 0 * 100 classes 0 * 10 4 * 10 type 0*1 1*1 total: 100 41Tuesday, January 29, 13
  28. 28. CSS Faceoff .container .external <=> .container a[rel=”external”] div ul li a.item <=> div.nav li aTuesday, January 29, 13
  29. 29. IE < 9 Shim Most interesting selectors require a modern browser If your clients don’t have one - use a shimTuesday, January 29, 13
  30. 30. CSS Properties float and positioning display: block, inline, inline-block backgroundTuesday, January 29, 13
  31. 31. Floats Takes an element out of the normal layout context “wrap” all other contents around itTuesday, January 29, 13
  32. 32. position: absolute Draw an element in a specific location. The element is painted in another “layer” Positioning is relative to a container having non static positioningTuesday, January 29, 13
  33. 33. Display: inline/block Block elements occupy an entire line Inline elements are placed inside box elements Common block elements: div, h1..h6, p, ul, ol, dl, li, dt, dd, table, blockquote, pre, form Common inline elements: span, a, strong, em, img, br, input inline-block combines the twoTuesday, January 29, 13
  34. 34. Demo Implementing a top navigation menu with inline- blockTuesday, January 29, 13
  35. 35. Lab Fill in the CSS to create the grid on the right HTML at: https:// gist.github.com/ 4286294Tuesday, January 29, 13
  36. 36. Page Layouts Fixed layout Fluid (liquid) layout Adaptive layoutTuesday, January 29, 13
  37. 37. Fixed Width Layout Usually 960px or 760px wide Keep your designers happy Example: http://www.petplace.com/Tuesday, January 29, 13
  38. 38. Fluid Width Layouts Use percentages for widths Can make better use of screen real estate than fixed Use min-width, max-width to prevent surprises Remember: Page must be usable at all times Example: http://graybit.com/main.phpTuesday, January 29, 13
  39. 39. Adaptive Layout Uses media queries to make a smart decision about the layout Makes the best use of screen real estate Takes the most work to implement Example: mediaqueri.esTuesday, January 29, 13
  40. 40. Choosing Layout Be careful with fluid layouts - easiest to build, most difficult to test Use fixed layout when targeting only one client Use adaptive layout when targeting many client platformsTuesday, January 29, 13
  41. 41. 960 Grid For fixed grid layouts, no need to reinvent the wheel. 960grid is a set of CSS files for implementing a grid systemTuesday, January 29, 13
  42. 42. Common CSS Centering elements Showing/Hiding elements Box punching CSS SpritesTuesday, January 29, 13
  43. 43. Centering elements Use align: center to center text inside a block container Use margin: 0 auto to center a block Use line-height to center verticallyTuesday, January 29, 13
  44. 44. Showing/Hiding Elements Use display: none to completely remove an element from the page Use visibility: hidden to hide an element. Hidden elements still effect page layoutTuesday, January 29, 13
  45. 45. Box Punching Fiddle: http:// jsfiddle.net/ynonp/ PqtkB/1/Tuesday, January 29, 13
  46. 46. CSS Sprites One image file with many small images Save bandwidth Better performance DemoTuesday, January 29, 13
  47. 47. Q&ATuesday, January 29, 13
  48. 48. Thank You Ynon Perek ynon@ynonperek.com ynonperek.comTuesday, January 29, 13

×