CSS Techniques Explained

CSS Technieken toegelicht
Robin Poort, CEO & Co-founder, FinishJoomla Joomla!dagen Nederland, april 2011

Alle bestanden van de voorbeelden in deze presentatie zijn hier te vinden: http://www.finishjoomla.com/media/css-technieken-toegelicht.zip

CSS technieken toegelicht Een goede basis

CSS – Een goede basis
Cheatsheets
Resets
Frameworks
Shorthand CSS
Specificity + !important
Clear & clearfix
Code-commenting

Source: http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/

Source: http://meyerweb.com/eric/tools/css/reset/

Source: http://960.gs/demo.html

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) ; }

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) ; }

Source: http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

* {} /* 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

!important

.example { color : red !important } Wint van <div class= ” example ” style= ” color : blue; ” >

HTML markup <div class= ” wrapper ” > Lorem ipsum <div class= ” floatbox ” > Floating box </div> </div> Resultaat CSS .wrapper { background : #FFF; border : 5px solid #29BDBD; margin : 10px; padding : 10px; } .floatbox { background : #FFF; border : 5px solid #333; padding : 10px; float : right ; }

HTML markup <div class= ” wrapper ” > Lorem ipsum <div class= ” floatbox ” > Floating box </div> <div class= ” clear ” ></div> </div> Resultaat CSS (in 960 grid system) .clear { clear : both; display : block; overflow : hidden ; visibility : hidden; width : 0; height : 0; }

HTML markup <div class= ” wrapper clearfix ” > Lorem ipsum <div class= ” floatbox ” > Floating box </div> </div> Resultaat 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; }

Code commenting
Voor jezelf later
Voor anderen na jou
Bij hacks en adjustments
/* Als kopjes in je CSS file */ h3 { font-size : 1em;} h3 { font-size : 1em;} /* Achter bepaalde styles */

CSS technieken toegelicht Goed om te weten

CSS – goed om te weten
Floating & position: absolute
Class stacking
.class.class
#id.class
CSS selectors

HTML markup <div class= ” container ” > <div class= ” absolute ” > Absolute </div> <div class= ” floatbox ” > Floating box </div> <div class= ” clear ” ></div> </div> Resultaat in IE7 CSS .container { position : relative; z-index : 1; } .absolute { right : 10px; position : absolute; top : 10px; z-index : 2; } .floatbox { float : left; }

HTML markup <div class= ” container ” > <div> <div class= ” absolute ” > Absolute </div> </div> <div class= ” floatbox ” > Floating box </div> <div class= ” clear ” ></div> </div> Resultaat CSS .container { position : relative; z-index : 1; } .absolute { right : 10px; position : absolute; top : 10px; z-index : 2; } .floatbox { float : left; }

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> Resultaat CSS .container { position : relative; z-index : 1; } .absolute { right : 10px; position : absolute; top : 10px; z-index : 2; } .floatbox { float : left; }

HTML markup <div class= ” blockBigBoldRed ” > Example </div> <div class= ” blockBigBlue ” > Example </div> Resultaat 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; }

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;} Resultaat

HTML markup <div class= ” block bigFont boldFont redFont ” > Example </div> <div class= ” block bigFont blueFont ” > Example </div> Resultaat 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;}

.class.class

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; }

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;}

#id.class

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; }

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;}

Handige 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

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; } Resultaat

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; } Resultaat

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; }

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; }

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; }

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; }

E[foo="warn"] HTML markup <label> Naam </label><br /> <input type= "text" /> <label> Geslacht </label><br /> <label> <input type= "radio" /> Man </label> <label> <input type= "radio" /> Vrouw </label> CSS input[type="text"] { width : 200px; border : 1px solid #CCC; background : #F5F5F5; padding : 5px; } input[type="radio"] { margin-left : 1em; }

CSS technieken toegelicht CSS in gebruik

CSS – In gebruik
Google Fonts
Attribute styling
DropCaps
Suckerfish menu
Styling images

Source: http://www.google.com/webfonts?subset=latin&sort=pop

HTML markup  <link href= ”http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz|Ubuntu” rel= ”stylesheet” type= ”text/css” />  <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; }

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; }

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>

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; }

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; }

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; }

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; }

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; }

Source: http://www.flickr.com/photos/shadeofmelon/3584367692/

HTML markup <ul> <li><a href= "#" > Item 1 </a></li> <li class= " parent " ><a href= "#" > Item 2 </a> <ul> <li><a href= "#" > Sub item 1 </a></li> <li><a href= "#" > Sub item 2 </a></li> <li class= " parent " ><a href= "#" > Sub item 3 </a> <ul> <li><a href= "#" > Sub sub item 1 </a></li> <li><a href= "#" > Sub sub item 2 </a></li> </ul> </li> <li><a href= "#" > Sub item 4 </a></li> </ul> </li> <li><a href= "#" > Item 3 </a></li> </ul>

ul li { float :left; position :relative; background :#555;} ul li a { color :#FFF; display :block; padding :5px 20px;} ul li ul { position :absolute;} ul li li { float :none;} ul li li a { width :200px; padding :5px 10px;} ul li li ul { left :220px; top :0;}

ul li { float :left; position :relative; background :#555;} ul li a { color :#FFF; display :block; padding :5px 20px;} ul li ul { position :absolute; display:none; } ul li li { float :none;} ul li li a { width :200px; padding :5px 10px;} ul li li ul { left :220px; top :0;}

ul li { float :left; position :relative; background :#555;} ul li a { color :#FFF; display :block; padding :5px 20px;} ul li ul { position :absolute; display :none;} ul li li { float :none;} ul li li a { width :200px; padding :5px 10px;} ul li li ul { left :220px; top :0;} ul li:hover ul {display:block;} ul li:hover {background:#333;}

ul li { float :left; position :relative;} ul li a { background :#555; color :#FFF; display :block; padding :5px 20px;} ul li ul { position :absolute; display :none;} ul li li { float :none;} ul li li a { width :200px; padding :5px 10px;} ul li li ul { left :220px; top :0;} ul li:hover > ul { display :block;} ul li:hover { background :#333;}

ul li { float :left; position :relative;} ul li a { background :#555; color :#FFF; display :block; padding :5px 20px;} ul li ul { position :absolute; display :none;} ul li li { float :none;} ul li li a { width :200px; padding :5px 10px;} ul li li ul { left :220px; top :0;} ul li:hover > ul { display :block;} ul li:hover { background :#333;} ul li:hover {background:#333;} ul li li:hover {background:#111;} ul li li:hover {background:#000;}

ul li { float :left; position :relative;} ul li a { background :#555; color :#FFF; display :block; padding :5px 20px;} ul li ul { position :absolute; display :none;} ul li li { float :none;} ul li li a { width :200px; padding :5px 10px;} ul li li ul { left :220px; top :0;} ul li:hover > ul { display :block;} ul li.parent:hover { background :#333;} ul li:hover { background :#333;} ul li li:hover { background :#111;} ul li li:hover { background :#000;} ul li.parent a {background:url(arrow_down.png) no-repeat right 20px;}

ul li { float :left; position :relative;} ul li a { background :#555; color :#FFF; display :block; padding :5px 20px;} ul li ul { position :absolute; display :none;} ul li li { float :none;} ul li li a { width :200px; padding :5px 10px;} ul li li ul { left :220px; top :0;} ul li:hover > ul { display :block;} ul li.parent:hover { background :#333;} ul li:hover { background :#333;} ul li li:hover { background :#111;} ul li li:hover { background :#000;} ul li.parent > a { background : url(arrow_down.png) no-repeat right 20px;}

ul li { float :left; position :relative;} ul li a { background :#555; color :#FFF; display :block; padding :5px 20px;} ul li ul { position :absolute; display :none;} ul li li { float :none;} ul li li a { width :200px; padding :5px 10px;} ul li li ul { left :220px; top :0;} ul li:hover > ul { display :block;} ul li.parent:hover { background :#333;} ul li:hover { background :#333;} ul li li:hover { background :#111;} ul li li:hover { background :#000;} ul li.parent > a { background : url(arrow_down.png) no-repeat right 20px;} ul li li.parent > a {background:url(arrow_side.png) no-repeat right 15px;}

HTML markup <img class= ” img1 ” src= ”image.png” alt= ” image ” /> CSS img.img1 { background : #FFF; padding : 2px; border : 2px solid #AAA; }

HTML markup <img class= ” img2 ” src= ”image.png” alt= ” image ” /> CSS img.img2 { background : url(seamless.png) ; padding : 4px; }

HTML markup <img class= ” img3 ” src= ”image.png” alt= ” image ” /> CSS img.img3 { background : url(seamless.png) ; padding : 3px; border : 1px solid #000; }

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; }

Vragen?

Coupon code JD11NL
– 15% discount on all our products – Valid until 2 weeks from now – 50 coupons available
Robin Poort
[email_address]
Twitter: @finishjoomla

CSS Techniques Explained

by FinishJoomla on Apr 03, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 71

Statistics

CSS Techniques Explained — Presentation Transcript