![* {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */ li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */ li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */ h1 + *[rel=up] {} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */ ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */ li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */ #x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */ style= "" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */ Source: http://www.w3.org/TR/CSS2/cascade.html](https://image.slidesharecdn.com/presentatiecsstechniekenpfcongres-110919033820-phpapp01/85/CSS-Technieken-Toegelicht-14-320.jpg)
![Very useful CSS selectors E F Matches any F element that is a descendant of an E element. E > F Matches any F element that is a child of an element E. E + F Matches any F element immediately preceded by a sibling element E. E:first-child Matches element E when E is the first child of its parent. E[foo] Matches any E element with the "foo" attribute set (whatever the value). E[foo="warn"] Matches any E element whose "foo" attribute value is exactly equal to "warn". E[foo~="warn"] Matches any E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "warn". Source: http://www.w3.org/TR/CSS2/selector.html](https://image.slidesharecdn.com/presentatiecsstechniekenpfcongres-110919033820-phpapp01/85/CSS-Technieken-Toegelicht-32-320.jpg)
![E[foo="warn"] HTML markup <label> Name </label><br /> <input type= "text" /> <label> Gender </label><br /> <label> <input type= "radio" /> Man </label> <label> <input type= "radio" /> Woman </label> CSS input[type="text"] { width : 200px; border : 1px solid #CCC; background : #F5F5F5; padding : 5px; } input[type="radio"] { margin-left : 1em; }](https://image.slidesharecdn.com/presentatiecsstechniekenpfcongres-110919033820-phpapp01/85/CSS-Technieken-Toegelicht-39-320.jpg)
![CSS li a[href$='.doc'] , li a[href$='.pdf'] , li a[href$='.xls'] , li a[href$='.png'] , li a[href*='twitter.com'] , li a[href*='facebook.com'] , li a[href*='linkedin.com'] , li a[href*='youtube.com'] { padding-left :40px; min-height :24px; display :inline-block; line-height :24px; } This won't work on IE6 and only on IE7+ when a Doctype is declared.](https://image.slidesharecdn.com/presentatiecsstechniekenpfcongres-110919033820-phpapp01/85/CSS-Technieken-Toegelicht-47-320.jpg)
![CSS li a[href$='.doc'] { background : url(doc.gif) no-repeat; } li a[href$='.pdf'] { background : url(pdf.gif) no-repeat; } li a[href$='.xls'] { background : url(xls.gif) no-repeat; } li a[href$='.png'] { background : url(png.gif) no-repeat; } li a[href*='twitter.com'] { background : url(twitter.gif) no-repeat; } li a[href*='facebook.com'] { background : url(facebook.gif) no-repeat; } li a[href*='linkedin.com'] { background : url(linkedin.gif) no-repeat; } li a[href*='youtube.com'] { background : url(youtube.gif) no-repeat; } This won't work on IE6 and only on IE7+ when a Doctype is declared.](https://image.slidesharecdn.com/presentatiecsstechniekenpfcongres-110919033820-phpapp01/85/CSS-Technieken-Toegelicht-48-320.jpg)
![@rhcpoort Robin Poort [email_address] @tweepixels](https://image.slidesharecdn.com/presentatiecsstechniekenpfcongres-110919033820-phpapp01/85/CSS-Technieken-Toegelicht-60-320.jpg)
CSS Technieken Toegelicht
- 1. CSS Technieken Toegelicht Robin Poort (@rhcpoort) Owner Tweepixels Webdesign (@tweepixels) PFCongres, September 2011
- 2. Robin Poort Follow me on Twitter: @rhcpoort and @tweepixels
- 3. A Solid Foundation Reset Frameworks Cheatsheets Shorthand Specificity Clear & Clearfix Commenting
- 7. <div class= ” clear ” ></div> & <div class= ” clearfix ” ></div>
- 8. HTML markup <div class= ” wrapper ” > Lorem ipsum <div class= ” floatbox ” > Floating box </div> </div> Result CSS .wrapper { background : #FFF; border : 5px solid #29BDBD; margin : 10px; padding : 10px; } .floatbox { background : #FFF; border : 5px solid #333; padding : 10px; float : right; }
- 9. HTML markup <div class= ” wrapper ” > Lorem ipsum <div class= ” floatbox ” > Floating box </div> <div class= ” clear ” ></div> </div> Result CSS (in 960 grid system) .clear { clear : both; display : block; overflow : hidden; visibility : hidden; width : 0; height : 0; }
- 10. HTML markup <div class= ” wrapper clearfix ” > Lorem ipsum <div class= ” floatbox ” > Floating box </div> </div> Result CSS (in 960 grid system) .clearfix:before,.clearfix:after { content : '\0020' ; display : block; overflow : hidden; visibility : hidden; width : 0; height : 0; } .clearfix:after { clear : both;} .clearfix { zoom : 1;} Most frameworks come with built-in clear & clearfix classes.
- 11. div.example { background-color : #FFFFFF; background-image : url(img.png) ; background-position : left top; background-repeat : repeat-x; border-width : 1px; border-style : solid; border-color : #000000; margin-top : 10px; margin-right : 10px; margin-bottom : 10px; margin-left : 10px padding-top : 10px; padding-right : 15px; padding-bottom : 20px; padding-left : 15px; } div.example2 { font-family : Arial, sans-serif; font-size : 12px; line-height : 1.5em; font-weight : bold; font-style : italic; font-variant : small-caps; list-style-type : disc; list-style-position : inside; list-style-image : url(img.png) ; }
- 12. div.example { background : #FFFFFF url(example.png) left top repeat-x; border : 1px solid #000000; margin : 10px; padding : 10px 15px 20px; } div.example2 { font : bold italic small-caps 1em/1.5em Arial,sans-serif; list-style : disc inside url(example.png) ; } When using shorthand CSS make sure you use the correct order for the values.
- 14. * {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */ li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */ li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */ h1 + *[rel=up] {} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */ ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */ li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */ #x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */ style= "" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */ Source: http://www.w3.org/TR/CSS2/cascade.html
- 15. !important
- 16. .example { color : red !important } Overrules <div class= ” example ” style= ” color : blue; ” > Using !important might confuse you or other developers later. Use with caution!
- 17. Commenting Do it for yourself Do it for others When using hacks and adjustments /* As headers */ h3 { font-size : 1em;} H3 { font-size : 1em; /* Just this line */ color : red; }
- 18. Good to Know Class stacking .class.class Floating & position: absolute CSS selectors #id.class
- 19. HTML markup <div class= ” container ” > <div class= ” absolute ” > Absolute </div> <div class= ” floatbox ” > Floating box </div> <div class= ” clear ” ></div> </div> Result in IE7 CSS .container { position : relative; z-index : 1; } .absolute { right : 10px; position : absolute; top : 10px; z-index : 2; } .floatbox { float : left; }
- 20. HTML markup <div class= ” container ” > <div> <div class= ” absolute ” > Absolute </div> </div> <div class= ” floatbox ” > Floating box </div> <div class= ” clear ” ></div> </div> Result CSS .container { position : relative; z-index : 1; } .absolute { right : 10px; position : absolute; top : 10px; z-index : 2; } .floatbox { float : left; }
- 21. HTML markup <div class= ” container ” > <div class= ” IE-div ” > <div class= ” absolute ” > Absolute </div> </div> <div class= ” floatbox ” > Floating box </div> <div class= ” clear ” ></div> </div> Result CSS .container { position : relative; z-index : 1; } .absolute { right : 10px; position : absolute; top : 10px; z-index : 2; } .floatbox { float : left; }
- 22. <div class= ” class stacking ” ></div>
- 23. HTML markup <div class= ” blockBigBoldRed ” > Example </div> <div class= ” blockBigBlue ” > Example </div> Result CSS .blockBigBoldRed { background : #FFFFFF; border : 1px solid #CCCCCC; margin : 10px; padding : 10px; font-size : 2em; color : red; font-weight : bold; } .blockBigBlue { background : #FFFFFF; border : 1px solid #CCCCCC; margin : 10px; padding : 10px; font-size : 2em; color : blue; }
- 24. HTML markup <div class= ” block ” > <div class= ” bigFont ” > <div class= ” boldFont ” > <div class= ” redFont ” > Example </div> </div> </div> </div> <div class= ” block ” > <div class= ” bigFont ” > <div class= ” blueFont ” > Example </div> </div> </div> CSS .block { background : #FFFFFF; border : 1px solid #CCCCCC; margin : 10px; padding : 10px; } .bigFont { font-size : 2em;} .redFont { color : red;} .blueFont { color : blue;} .boldFont { font-weight : bold;} Result
- 25. HTML markup <div class= ” block bigFont boldFont redFont ” > Example </div> <div class= ” block bigFont blueFont ” > Example </div> Result CSS .block { background : #FFFFFF; border : 1px solid #CCCCCC; margin : 10px; padding : 10px; } .bigFont { font-size : 2em;} .redFont { color : red;} .blueFont { color : blue;} .boldFont { font-weight : bold;} Make sure you divide all classes in the markup with spaces.
- 26. .class.class
- 27. HTML markup <div class= ” block bigFont redFont ” > Example <div class= ” caption redFont ” > Example </div> </div> Result CSS .block { background : #FFFFFF; border : 1px solid #CCCCCC; margin : 10px; padding : 10px; } .bigFont { font-size : 2em;} .redFont { color : red;} .caption { background : #CCC; padding : 10px; }
- 28. HTML markup <div class= ” block bigFont redFont ” > Example <div class= ” caption redFont ” > Example </div> </div> Resultaat CSS .block { background : #FFFFFF; border : 1px solid #CCCCCC; margin : 10px; padding : 10px; } .bigFont { font-size : 2em;} .redFont { color : red;} .caption { background : #CCC; padding : 10px; } .caption.redFont { color : darkred;} There are spaces between classes in the markup but not in your CSS file.
- 29. #id.class
- 30. HTML markup <div id= ” bar1 ” class= ” grid_4 ” > Example </div> <div id= ” bar2 ” class= ” grid_4 ” > Example </div> <div id= ” bar3 ” class= ” grid_4 ” > Example </div> CSS .grid_4 { display : inline; float : left; margin-left : 10px; margin-right : 10px; position : relative; width: 300px; }
- 31. HTML markup <div id= ” bar1 ” class= ” grid_4 ” > Example </div> <div id= ” bar2 ” class= ” grid_4 ” > Example </div> <div id= ” bar3 ” class= ” grid_4 ” > Example </div> CSS .grid_4 { display : inline; float : left; margin-left : 10px; margin-right : 10px; position : relative; } #bar1.grid_4 { margin-left : 0;} #bar3.grid_4 { margin-right : 0;}
- 32. Very useful CSS selectors E F Matches any F element that is a descendant of an E element. E > F Matches any F element that is a child of an element E. E + F Matches any F element immediately preceded by a sibling element E. E:first-child Matches element E when E is the first child of its parent. E[foo] Matches any E element with the "foo" attribute set (whatever the value). E[foo="warn"] Matches any E element whose "foo" attribute value is exactly equal to "warn". E[foo~="warn"] Matches any E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "warn". Source: http://www.w3.org/TR/CSS2/selector.html
- 33. E > F HTML markup <div class= ” blog ” > <p> Introduction </p> <div class= ” story ” > <p> Lorem ipsum dolor </p> <div class= ” date ” > <p> Date </p> </div> </div> </div> CSS .blog p { font-family : Arial, sans-serif; font-size : 1em; color : #555; } .story p { font-size : 1.3em; color : #111; }
- 34. E > F HTML markup <div class= ” blog ” > <p> Introduction </p> <div class= ” story ” > <p> Lorem ipsum dolor </p> <div class= ” date ” > <p> Date </p> </div> </div> </div> CSS .blog p { font-family : Arial, sans-serif; font-size : 1em; color : #555; } .story > p { font-size : 1.3em; color : #111; }
- 35. E + F HTML markup <div class= ” blog ” > <h1> Title </h1> <h2> Subtitle </h2> <h2> Subtitle </h2> <p> Lorem ipsum </p> <h2> Subtitle </h2> <p> Lorem ipsum </p> </div> CSS h1 { margin : 0 0 1em 0; font-size : 2em; } h2 { margin : 0 0 .5em 0; font-size : 1.4em; color : #000; }
- 36. E + F HTML markup <div class= ” blog ” > <h1> Title </h1> <h2> Subtitle </h2> <h2> Subtitle </h2> <p> Lorem ipsum </p> <h2> Subtitle </h2> <p> Lorem ipsum </p> </div> CSS h1 { margin : 0 0 1em 0; font-size : 2em; } h2 { margin : 0 0 .5em 0; font-size : 1.4em; color : #000; } h1 + h2 { margin-top : -1em; font-style : italic; }
- 37. E:first-child HTML markup <div class= ” blog ” > <h1> Title </h1> <p> Lorem ipsum </p> <p> Lorem ipsum </p> </div> CSS h1 { margin : 0 0 1em 0; font-size : 2em; color : #222; } p { color : #444; margin-bottom : 1em; } .blog p:first-child { font-family : serif; font-style : italic; color : #000; }
- 38. E:first-child HTML markup <div class= ” blog ” > <h1> Title </h1> <div class= ” story ” > <p> Lorem ipsum </p> <p> Lorem ipsum </p> </div> </div> CSS h1 { margin : 0 0 1em 0; font-size : 2em; color : #222; } p { color : #444; margin-bottom : 1em; } .story p:first-child { font-family : serif; font-style : italic; color : #000; }
- 39. E[foo="warn"] HTML markup <label> Name </label><br /> <input type= "text" /> <label> Gender </label><br /> <label> <input type= "radio" /> Man </label> <label> <input type= "radio" /> Woman </label> CSS input[type="text"] { width : 200px; border : 1px solid #CCC; background : #F5F5F5; padding : 5px; } input[type="radio"] { margin-left : 1em; }
- 40. CSS in use Attribute Styling Drop Caps Google Fonts Styling Images
- 42. HTML markup <!-- place in <head> section --> <link href= ”http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz|Ubuntu” rel= ”stylesheet” type= ”text/css” /> <!-- place in </head> section --> <h1> Title </h1> <p> The quick brown fox jumps over the lazy dog. </p> CSS h1 { font-family : 'Yanone Kaffeesatz' , arial, serif;} p { font-family : 'Ubuntu' , arial, serif;} Don't use too many Google Fonts at the same page because MSIE can't handle that.
- 45. HTML markup <ul> <li><a class= ” doc-icon ” href= "test.doc" > Lorem ipsum dolor </a></li> <li><a class= ” pdf-icon ” href= "test.pdf" > Sit amet consect </a></li> <li><a class= ” xls-icon ” href= "test.xls" > Lorem ipsum dolor </a></li> <li><a class= ” png-icon ” href= "test.png" > Sit amet consectet </a></li> </ul> CSS li a.doc-icon { background : url(doc.gif) no-repeat; } li a.pdf-icon { background : url(pdf.gif) no-repeat; } li a.xls-icon { background : url(xls.gif) no-repeat; } li a.png-icon { background : url(png.gif) no-repeat; }
- 46. HTML markup <ul> <li><a href= "test.doc" > Lorem ipsum dolor </a></li> <li><a href= "test.pdf" > Sit amet consectetuer </a></li> <li><a href= "test.xls" > Lorem ipsum dolor </a></li> <li><a href= "test.png" > Sit amet consectetuer </a></li> </ul> <ul> <li><a href= "http://twitter.com/finishjoomla" > Twitter </a></li> <li><a href= "http://www.facebook.com/profile.php" > Facebook </a></li> <li><a href= "http://www.linkedin.com/company/" > Linkedin </a></li> <li><a href= "http://www.youtube.com/user/" > Youtube </a></li> </ul>
- 47. CSS li a[href$='.doc'] , li a[href$='.pdf'] , li a[href$='.xls'] , li a[href$='.png'] , li a[href*='twitter.com'] , li a[href*='facebook.com'] , li a[href*='linkedin.com'] , li a[href*='youtube.com'] { padding-left :40px; min-height :24px; display :inline-block; line-height :24px; } This won't work on IE6 and only on IE7+ when a Doctype is declared.
- 48. CSS li a[href$='.doc'] { background : url(doc.gif) no-repeat; } li a[href$='.pdf'] { background : url(pdf.gif) no-repeat; } li a[href$='.xls'] { background : url(xls.gif) no-repeat; } li a[href$='.png'] { background : url(png.gif) no-repeat; } li a[href*='twitter.com'] { background : url(twitter.gif) no-repeat; } li a[href*='facebook.com'] { background : url(facebook.gif) no-repeat; } li a[href*='linkedin.com'] { background : url(linkedin.gif) no-repeat; } li a[href*='youtube.com'] { background : url(youtube.gif) no-repeat; } This won't work on IE6 and only on IE7+ when a Doctype is declared.
- 50. HTML markup <p> <span class= ” dropcap ” > L </span> orem ipsum dolor sit amet, consectetur adipiscing elit... </p> CSS p { font-family : Arial, sans-serif;} span.dropcap { font-size : 3em; color : #29BDBD; float : left; margin : 10px 10px 0 0; display : block; }
- 51. HTML markup <p class= ” dropcap ” > Lorem ipsum dolor sit amet, consectetur adipiscing elit... </p> CSS p.dropcap { font-family : Arial, sans-serif;} p.dropcap:first-letter { font-size : 3em; color : #29BDBD; float : left; margin : 10px 10px 0 0; } This won't work on IE6 and only on IE7+ when a Doctype is declared.
- 52. HTML markup <p class= ” dropcap ” > Lorem ipsum dolor sit amet, consectetur adipiscing elit... </p> CSS p.dropcap { font-family : 'Old Standard TT' , Times, serif;} p.dropcap:first-letter { font-family : 'UnifrakturMaguntia' , Times, serif; font-size : 3em; color : #29BDBD; float : left; margin : 10px 10px 0 0; }
- 55. HTML markup <img class= ” img1 ” src= ”image.png” alt= ” image ” /> CSS img.img1 { background : #FFF; padding : 2px; border : 2px solid #AAA; }
- 56. HTML markup <img class= ” img2 ” src= ”image.png” alt= ” image ” /> CSS img.img2 { background : url(seamless.png) ; padding : 4px; } Make sure the background image is a seamless pattern.
- 57. HTML markup <img class= ” img3 ” src= ”image.png” alt= ” image ” /> CSS img.img3 { background : url(seamless.png) ; padding : 3px; border : 1px solid #000; }
- 58. HTML markup <img class= ” img4 ” src= ”image.png” alt= ” image ” /> CSS img.img4 { background : #000; padding : 1px; border : 2px solid #FFF; outline : 1px solid #AAA; } The outline property is not supported by IE6 and IE7.
- 59. Questions?
- 60. @rhcpoort Robin Poort [email_address] @tweepixels