Download - CSS Technieken Toegelicht

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

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


Floating box

</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


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;


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>


Floating box

</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>

<div

class=”absolute”>

Absolute

</div>

</div>


Floating box

</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=”IE-div”>

<div

class=”absolute”>

Absolute

</div>

</div>


Floating box

</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=”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 {



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 {



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 {



margin: 10px;

padding: 10px;

}



.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 {



margin: 10px;

padding: 10px;

}



.caption {

background: #CCC;

padding: 10px;

}

HTML markup

<div class=”block bigFont redFont”>

Example

<div class=”caption redFont”>

Example

</div>

</div>

Resultaat

CSS

.block {



margin: 10px;

padding: 10px;

}



.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>


Example

</div>


Example

</div>

CSS

.grid_4 {

display: inline;

float: left;

margin-left: 10px;

margin-right: 10px;

position: relative;

width: 300px;

}

HTML markup


Example

</div>


Example

</div>


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 {


serif;

font-size: 1em;

color: #555;

}

.story p {

font-size: 1.3em;

color: #111;

}

E > F

HTML markup


<p>Introduction</p>


<p>Lorem ipsum dolor</p>

<div class=”date”>

<p>Date</p>

</div>

</div>

</div>

CSS

.blog p {


serif;

font-size: 1em;

color: #555;

}

.story > p {

font-size: 1.3em;

color: #111;

}

E + F

HTML markup


<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


<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


<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


<h1>Title</h1>


<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



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

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


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;


}


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;


}

HTML markup

<img class=”img1” src=”image.png” alt=”image” />

CSS

img.img1 {

background: #FFF;

padding: 2px;

border: 2px solid #AAA;

}

HTML markup


CSS

img.img2 {

background: url(seamless.png);

padding: 4px;

}

Make sure the background image is a seamless pattern.

HTML markup


CSS

img.img3 {

background: url(seamless.png);

padding: 3px;


}

HTML markup


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

[email protected]

@tweepixels