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;


padding: 10px;

float: right;

}

HTML markup

<div class=”wrapper”>

Lorem ipsum


Floating box

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


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


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>


Floating box

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

<div

class=”absolute”>

Absolute

</div>

</div>


Floating box

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

<div

class=”absolute”>

Absolute

</div>

</div>


Floating box

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



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

Resultaat

HTML markup

<div class=”block bigFont boldFont

redFont”>

Example

</div>

<div class=”block bigFont blueFont”>

Example

</div>

Resultaat

CSS

.block {



margin: 10px;

padding: 10px;

}



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



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

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

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 {


serif;

font-size: 1em;

color: #555;

}

.story p {

font-size: 1.3em;

color: #111;

}

Resultaat

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;

}

Resultaat

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


}

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;


}

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


</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 ul {position:absolute;display:none;}










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:hover > ul {display:block;}











ul li li:hover {background:#111;}









ul li.parent:hover {background:#333;}




ul li.parent a {background:url(arrow_down.png) no-repeat right 20px;}












ul li.parent > a {background:url(arrow_down.png) no-repeat right 20px;}












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


CSS

img.img2 {

background: url(seamless.png);

padding: 4px;

}

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;

}

Vragen?

Coupon code

JD11NL– 15% discount on all our products

– Valid until 2 weeks from now

– 50 coupons available

Robin Poort

[email protected]

Twitter: @finishjoomla

CSS Techniques Explained

Technology

Transcript of CSS Techniques Explained