• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
03 css

03 css



Writing professional modern CSS for your websites and web applications

Writing professional modern CSS for your websites and web applications



Total Views
Views on SlideShare
Embed Views



5 Embeds 521

http://ynonperek.com 430
http://mobileweb.ynonperek.com 67
http://www.ynonperek.com 18
http://localhost 4
http://amplytix.com 2



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    03 css 03 css Presentation Transcript

    • Pro CSS Simple, kludge free web designTuesday, January 29, 13
    • Agenda CSS Selectors CSS Properties Page Layouts Tips & TricksTuesday, January 29, 13
    • CSS SelectorsTuesday, January 29, 13
    • 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
    • ID Selector Select a node based on id CSS #content { width: 960px; margin: 0 auto; } HTML <div id="content"> </div>Tuesday, January 29, 13
    • 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
    • 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
    • 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
    • Enter CSS3 More selectors Less clutter in HTMLTuesday, January 29, 13
    • 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
    • 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
    • Pseudo Selectors :first-child :last-child :nth-child, :nth-of-type :not :enabled, :disabled, :checkedTuesday, January 29, 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
    • :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
    • :nth-of-type Has an+b-1 siblings with the same expanded element name before Used for mixed type containersTuesday, January 29, 13
    • Psudo Elements Create abstractions about the document tree beyond html Goal: Simplify your html ::first-letter, ::first-line, ::before, ::afterTuesday, January 29, 13
    • Drop Caps p { margin-top: 20px; } p::first-letter {     font: 2em zapfino;     float: left;     margin: -22px 15px 0 0; }Tuesday, January 29, 13
    • :before and :afterTuesday, January 29, 13
    • 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
    • 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
    • CSS ConflictsTuesday, January 29, 13
    • What Happens Here ? CSS p    { color: red; } .foo { color: blue; } HTML <p class="foo">Hello</p>Tuesday, January 29, 13
    • What Happens Here ? CSS p    { color: red; } .foo { color: blue; } HTML <p class="foo">Hello</p> RESULT HelloTuesday, January 29, 13
    • 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
    • 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
    • CSS Faceoff Who Wins ? #slider OR .twocol .container .primary .content ulTuesday, January 29, 13
    • 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
    • CSS Faceoff .container .external <=> .container a[rel=”external”] div ul li a.item <=> div.nav li aTuesday, January 29, 13
    • IE < 9 Shim Most interesting selectors require a modern browser If your clients don’t have one - use a shimTuesday, January 29, 13
    • CSS Properties float and positioning display: block, inline, inline-block backgroundTuesday, January 29, 13
    • Floats Takes an element out of the normal layout context “wrap” all other contents around itTuesday, January 29, 13
    • 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
    • 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
    • Demo Implementing a top navigation menu with inline- blockTuesday, January 29, 13
    • Lab Fill in the CSS to create the grid on the right HTML at: https:// gist.github.com/ 4286294Tuesday, January 29, 13
    • Page Layouts Fixed layout Fluid (liquid) layout Adaptive layoutTuesday, January 29, 13
    • Fixed Width Layout Usually 960px or 760px wide Keep your designers happy Example: http://www.petplace.com/Tuesday, January 29, 13
    • 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
    • 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
    • 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
    • 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
    • Common CSS Centering elements Showing/Hiding elements Box punching CSS SpritesTuesday, January 29, 13
    • 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
    • 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
    • Box Punching Fiddle: http:// jsfiddle.net/ynonp/ PqtkB/1/Tuesday, January 29, 13
    • CSS Sprites One image file with many small images Save bandwidth Better performance DemoTuesday, January 29, 13
    • Q&ATuesday, January 29, 13
    • Thank You Ynon Perek ynon@ynonperek.com ynonperek.comTuesday, January 29, 13