CSS: cascading stylesheets Mediamatic NetLes | dHTML 3 September 20193 September 2019 CSS: cascading stylesheets Ontwerpen met webstandaarden

Wat is een cascading stylesheet? CSS 3/9/19 Mediamatic NetLes | dHTML 3 September 20193 September 2019 Wat is een cascading stylesheet? Opmaakinstructie (stijl), gescheiden van content Cascading: “Trapsgewijs opmaakmodel” de laatstgekregen instructie overruled de vorige, nakomelingen erven eigenschappen van (voor)ouders Voorbij de beperkingen van HTML Toepassen kan op 3 manieren: extern, embedded, inline Oefening: embedded stijl bekijken en wijzigen, inline stijl bekijken

Mediamatic NetLes | dHTML CSS 3/9/19 Mediamatic NetLes | dHTML 3 September 20193 September 2019 Beperkingen van HTML Niet uniform cross-platform (bijv. Font-size) Interlinie, spatiering, fontgrootte, stijl van links Images, bijv. niet clipbaar Positionering via geneste tabellen en trans.gifs Border-mogelijkheden zeer beperkt Oefening: wijzig van p de interlinie, Wijzig van h1 fontgrootte, spatiering, border Maak een bijpassende unordered list-stijl (ul) (zo simpel mogelijk!)

Mediamatic NetLes | dHTML CSS 3/9/19 Mediamatic NetLes | dHTML 3 September 20193 September 2019 Waarom stylesheets? Design scheiden van content: via een extern css is de hele site snel aanpasbaar Zelfde site, andere css (media: print of: handheld) Structured text; semantiek; SEO; database Toegankelijkheid Webstandaard, cross-platform, cross-browser Meer controle over het ontwerp, voorheen onmogelijk in HTML Oefening: externe CSS in Dreamweaver aanroepen en marges en kleuren aanpassen

Mediamatic NetLes | dHTML CSS 3/9/19 Mediamatic NetLes | dHTML 3 September 20193 September 2019 Wat is de syntax? H1, h2, h3, h4 { font-size: 175%; text-transform: uppercase; color: yellow } H1 is de selector en zijn properties staan tussen {} Oefening: tik deze code in maak de h1 groter

Mogelijke selectors Alle html-tags: h1, p, body, etcetera CSS 3/9/19 Mogelijke selectors Alle html-tags: h1, p, body, etcetera Een custom class: of een unieke id: in de css .menu { } #uniek { } in de html <p class=‘menu’> <p id=“uniek”> pseudo-class (bijv. links) a:link, a:hover { } (let op de volgorde: link, visited, hover, active) Combinaties, zoals: h4 ul { } ul#uniek li { } a.menu:link { } Oefening: links zonder onderstreping, met hover-effect

En hoezo geen tabellen? Traag Excessief gebruik van trans.gif CSS 3/9/19 En hoezo geen tabellen? Traag Excessief gebruik van trans.gif Drama qua onderhoud Bedoeld voor tabulaire data (schemaatjes) Maar wat dan?

CSS-positioning Tabellen zijn niet meer nodig om te positioneren 3/9/19 CSS-positioning Tabellen zijn niet meer nodig om te positioneren Spacer-gifs ook niet Oefening: bekijk oefening4_3coldemo.html en pas ‘m hier en daar aan. (Go to Code in Dreamweaver) Bekijk dan oefening4_3coldemo2.html Bekijk thenoodleincident.com

CSS 3/9/19 Zijn er ook nadelen? Verschillen in browsers (bijv. met meerkoloms) Op te lossen met truukjes en hacks Oude browsers (IE4 etc) ondersteunen css slecht of niet Moeilijker te leren en toe te passen dan HTML Wysiwyg editors previewen (nog) niet perfect

Tips Groeperen: h1, h2, h2 ul, p.special { } CSS 3/9/19 Tips Groeperen: h1, h2, h2 ul, p.special { } Fontgrootte in % (of em) zorgt dat IE/win kan schalen. Let wel op overerven! Numerieke interlinie werkt het best: 85%/1.5 Shorthand voorbeeld: {font: bold italic small-caps 28px/1.5 Arial, "Lucida Console"} Shorthand margin/padding/border (clockwise): margin: 0, 10%, 0, 10px (Top Right Bottom Left) margin: 0, 10% (TB, RL) Display: block, inline, list-item, none

Handige sites csszengarden.com sitepoint.com (o.a. het boek) 3/9/19 Handige sites csszengarden.com sitepoint.com (o.a. het boek) alistapart.com thenoodleincident.com (bijv. 3-koloms-layout) glish.com (bijv. dynamische menu's) hotscripts.com (sniffer scripts) positioniseverything.net (bugs en css) w3.org css validator handleidinghtml.nl, blooberry.com (reference)

3/9/19 CSS