20. 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 */
34. HTML markup CSS
<div id=”bar1” class=”grid_4”> .grid_4 {
Example display: inline;
</div> float: left;
<div id=”bar2” class=”grid_4”> margin-left: 10px;
Example margin-right: 10px;
</div> position: relative;
<div id=”bar3” class=”grid_4”> width: 300px;
Example }
</div>
35. HTML markup CSS
<div id=”bar1” class=”grid_4”> .grid_4 {
Example display: inline;
</div> float: left;
<div id=”bar2” class=”grid_4”> margin-left: 10px;
Example margin-right: 10px;
</div> position: relative;
<div id=”bar3” class=”grid_4”> }
Example #bar1.grid_4 {margin-left: 0;}
</div> #bar3.grid_4 {margin-right: 0;}
36. 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
37. CSS
E>F
.blog p {
HTML markup font-family: Arial, sans-
serif;
<div class=”blog”>
font-size: 1em;
<p>Introduction</p>
color: #555;
<div class=”story”>
}
<p>Lorem ipsum dolor</p>
.story p {
<div class=”date”>
font-size: 1.3em;
<p>Date</p>
color: #111;
</div>
}
</div>
</div>
Resultaat
47. HTML markup
<!-- Begin plaats in <head> -->
<link href=”http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz|Ubuntu”
rel=”stylesheet” type=”text/css” />
<!-- Eind plaats in </head> -->
<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;
}
50. 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; }
52. 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;
}
53. 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; }
55. 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;
}
62. 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;}
64. 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;}
66. 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;}
68. 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;}
70. 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;}
72. 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;}
74. 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;}
76. 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;}
85. Coupon code
Robin Poort
JD11NL robin@finishjoomla.com
– 15% discount on all our products
– Valid until 2 weeks from now Twitter: @finishjoomla
– 50 coupons available