H ET N UT VAN CSS , ofwel: de kunst van het P IXELNEUKEN STYLE SHEETS

De kracht van CSS: CSS Zengarden

CSS voor n00bs (1)

CSS voor n00bs (2)

CSS voor n00bs (3)

Verschillende media Vormgeving van webcontent voor: Browsers PDA’s & mobiele telefoons Print Braille-apparaten, spraaksynthesizers TV, projectors

Vormgeving van webcontent voor:

Browsers

PDA’s & mobiele telefoons

Print

Braille-apparaten, spraaksynthesizers

TV, projectors

Cascading Meerdere style sheets in e en pagina Meerdere r egels voor hetzelfde element Piramide: uiteindelijk wint de meest specifieke definitie

Meerdere style sheets in e en pagina

Meerdere r egels voor hetzelfde element

Piramide: uiteindelijk wint de meest specifieke definitie

Standaarden W3C: valide code / valide CSS Webrichtlijnen ( www.webrichtlijnen.nl/richtlijnen/ )

W3C: valide code / valide CSS

Webrichtlijnen ( www.webrichtlijnen.nl/richtlijnen/ )

Gebod 1: Gij zult inhoud en vormgeving gescheiden houden (tenzij het beter uitkomt, natuurlijk)

Gij zult inhoud en vormgeving gescheiden houden

(tenzij het beter uitkomt, natuurlijk)

Gebod 2: Gij met elk type gebruiker rekening houden (tenzij het beter uitkomt, natuurlijk)

Gij met elk type gebruiker rekening houden

(tenzij het beter uitkomt, natuurlijk)

Gebod 3: gebruik betekenisvolle code en namen Kunnen ‘mikken’ op de juiste elementen. ID: <div id=“header”> Class: <div class=“blogpost”> Microformats: standaard opmaak voor vaak voorkomende elementen: hCard hCalendar

Kunnen ‘mikken’ op de juiste elementen.

ID: <div id=“header”>

Class: <div class=“blogpost”>

Microformats: standaard opmaak voor vaak voorkomende elementen:

hCard

hCalendar

Browser: the four letter word of web design

Fronteers Vakvereniging van ‘frontend-programmeurs’ : CSS, JavaScript, xHTML www.fronteers.nl

Vakvereniging van ‘frontend-programmeurs’ : CSS, JavaScript, xHTML

www.fronteers.nl

Case 1: screen layout

Case 1: handheld layout

Case 1: print layout

Case 2:

VOOR

NA

Het resultaat