css technieken toegelicht
DESCRIPTION
Vrijwel alle websites worden tegenwoordig gestijld met behulp van CSS. Vaak worden hierbij diverse (soms zeer omslachtige) technieken gebruikt, terwijl het in dezelfde situaties ook mogelijk is om nette code te gebruiken.Binnen deze presentatie zullen diverse (onbekende) technieken en 'best practices' worden besproken. Hiermee wordt het stijlen met behulp van CSS zo eenvoudig en efficiënt mogelijk, wat nettere code en betere prestaties op de verschillende browsers tot gevolg zal hebben.TRANSCRIPT
![Page 1: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/1.jpg)
CSS Technieken Toegelicht
Robin Poort (@rhcpoort)
Owner Tweepixels Webdesign (@tweepixels)
PFCongres, September 2011
![Page 2: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/2.jpg)
Robin Poort
Follow me on Twitter: @rhcpoort and @tweepixels
![Page 3: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/3.jpg)
A Solid Foundation
Reset
FrameworksCheatsheets
ShorthandSpecificityClear &
Clearfix
Commenting
![Page 4: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/4.jpg)
Source: http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/
![Page 5: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/5.jpg)
Source: http://meyerweb.com/eric/tools/css/reset/
![Page 6: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/6.jpg)
Source: http://960.gs/demo.html
![Page 7: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/7.jpg)
<div class=”clear”></div>
&<div class=”clearfix”></div>
![Page 8: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/8.jpg)
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;
}
![Page 9: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/9.jpg)
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;
}
![Page 10: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/10.jpg)
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.
![Page 11: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/11.jpg)
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);
}
![Page 12: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/12.jpg)
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.
![Page 13: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/13.jpg)
Source: http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
![Page 14: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/14.jpg)
* {} /* 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
![Page 15: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/15.jpg)
!important
![Page 16: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/16.jpg)
.example {color: red !important}
Overrules
<div class=”example” style=”color: blue;”>
Using !important might confuse you or other developers later. Use with caution!
![Page 17: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/17.jpg)
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;
}
![Page 18: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/18.jpg)
Good to Know
Class stacking
.class.class
Floating & position: absolute
CSS selectors#id.class
![Page 19: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/19.jpg)
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;
}
![Page 20: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/20.jpg)
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;
}
![Page 21: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/21.jpg)
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;
}
![Page 22: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/22.jpg)
<div class=”class stacking”></div>
![Page 23: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/23.jpg)
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;
}
![Page 24: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/24.jpg)
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
![Page 25: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/25.jpg)
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.
![Page 26: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/26.jpg)
.class.class
![Page 27: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/27.jpg)
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;
}
![Page 28: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/28.jpg)
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.
![Page 29: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/29.jpg)
#id.class
![Page 30: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/30.jpg)
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;
}
![Page 31: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/31.jpg)
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;}
![Page 32: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/32.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
![Page 33: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/33.jpg)
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;
}
![Page 34: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/34.jpg)
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;
}
![Page 35: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/35.jpg)
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;
}
![Page 36: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/36.jpg)
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;
}
![Page 37: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/37.jpg)
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;
}
![Page 38: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/38.jpg)
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;
}
![Page 39: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/39.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;
}
![Page 40: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/40.jpg)
CSS in use
Attribute Styling
Drop Caps
Google Fonts
Styling Images
![Page 41: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/41.jpg)
Source: http://www.google.com/webfonts?subset=latin&sort=pop
![Page 42: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/42.jpg)
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.
![Page 43: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/43.jpg)
![Page 44: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/44.jpg)
![Page 45: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/45.jpg)
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; }
![Page 46: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/46.jpg)
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>
![Page 47: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/47.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.
![Page 48: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/48.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.
![Page 49: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/49.jpg)
![Page 50: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/50.jpg)
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;
}
![Page 51: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/51.jpg)
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.
![Page 52: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/52.jpg)
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;
}
![Page 53: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/53.jpg)
![Page 54: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/54.jpg)
![Page 55: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/55.jpg)
HTML markup
<img class=”img1” src=”image.png” alt=”image” />
CSS
img.img1 {
background: #FFF;
padding: 2px;
border: 2px solid #AAA;
}
![Page 56: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/56.jpg)
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.
![Page 57: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/57.jpg)
HTML markup
<img class=”img3” src=”image.png” alt=”image” />
CSS
img.img3 {
background: url(seamless.png);
padding: 3px;
border: 1px solid #000;
}
![Page 58: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/58.jpg)
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.
![Page 59: CSS Technieken Toegelicht](https://reader033.vdocuments.site/reader033/viewer/2022052618/554be536b4c9056b348b4973/html5/thumbnails/59.jpg)
Questions?