css technieken toegelicht
Post on 08-May-2015
1.015 Views
Preview:
DESCRIPTION
TRANSCRIPT
CSS Technieken Toegelicht
Robin Poort (@rhcpoort)
Owner Tweepixels Webdesign (@tweepixels)
PFCongres, September 2011
Robin Poort
Follow me on Twitter: @rhcpoort and @tweepixels
A Solid Foundation
Reset
FrameworksCheatsheets
ShorthandSpecificityClear &
Clearfix
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 class=”clear”></div>
&<div class=”clearfix”></div>
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;
}
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;
}
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.
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);
}
When using shorthand CSS make sure you use the correct order for the values.
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}
Overrules
<div class=”example” style=”color: blue;”>
Using !important might confuse you or other developers later. Use with caution!
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;
}
Good to Know
Class stacking
.class.class
Floating & position: absolute
CSS selectors#id.class
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;
}
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;
}
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;
}
<div class=”class stacking”></div>
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;
}
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
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.
.class.class
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;
}
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.
#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;}
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
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;
}
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;
}
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>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;
}
CSS in use
Attribute Styling
Drop Caps
Google Fonts
Styling Images
Source: http://www.google.com/webfonts?subset=latin&sort=pop
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.
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;
}
This won't work on IE6 and only on IE7+ when a Doctype is declared.
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.
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;
}
This won't work on IE6 and only on IE7+ when a Doctype is declared.
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;
}
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;
}
Make sure the background image is a seamless pattern.
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;
}
The outline property is not supported by IE6 and IE7.
Questions?
@rhcpoort
Robin Poort
robin@tweepixels.nl
@tweepixels
top related