__
.
DNS4 
zoeken
  ⑬
«

CSS
Cascading Style Sheets

CSS op elke pagina

Even een beetje theorie achter de zeer veel gebruikte lettertjes "CSS". De titel van de pagina is duidelijk: Cascading Style Sheets. En dat wordt normaliter afgekort tot CSS. Tsja, leuk; dan weet je dus nog niets... Zolang je maar weet dat, met CSS, je elk element op een webpagina een bepaald uiterlijk kan geven, weet je eigenlijk al genoeg. Denk aan bijvoorbeeld de kleur van letters of een achtergrond, of de afmetingen van een div. Er is een ongelooflijk scala aan mogelijkheden beschikbaar voor alles wat je maar verzinnen kunt. En met elke nieuwe "versie" van CSS komen er weer een hoop mogelijkheden bij. Op de dns4 staan legio voorbeelden van hoe je CSS kan gebruiken, en wat de voordelen zijn om CSS te gebruiken. Ik zal een paar goede eigenschappen noemen. Het meest belangrijke is dat je de opmaak van een pagina in een apart (css) bestand kan zetten, en dat vervolgens voor al jouw pagina's te gebruiken door de desbetreffende code in de pagina te "plakken" met een - link rel="stylesheet" - . Ik denk dat je begrijpt dat buiten het feit dat je op 1 pagina (het css-bestand met de cascading style sheet) het uiterlijk van een complete website (met honderden pagina's) in een paar seconden kan veranderen door 1 statement in die file te veranderen, je ook nog eens een zeer grote snelheidswinst behaalt, doordat de css van alle pagina's gewoon in de cache van de browser zit. Samengevat: Het is snel, eenvoudig en heel erg verstandig om cascade style sheets te gebruiken.

Praten is leuk, schrijven hartstikke interessant, maar voorbeelden werken nog altijd het beste. Dan kan je tenminste zien dat ik geen onzin loop te verkopen.

cascade*
cascade
cascade

Wat had je van deze "cascade-embossing" gedacht? Klik voor de pagina van deze emboss-code hier. Ik ga hier niet de procedure bespreken voor embossing tekst. Dat staat allemaal op de desbetreffende pagina. Ik ga wel verder met een beetje theorie over de CSS. In een stylesheet wordt een "stijl" alsvolgt in elkaar "gesleuteld".
tagname.classname:pseudoclass {gespecificeerde stijlen}
Niet schrikken! Het is niet ingewikkeld... De tag naam kan b.v. -body- zijn of -a- of -img- (dit is wel duidelijk toch?). De classnaam is gewoon een naam die jij geeft. Als je de naam -ikbenslim- invult, kan je met deze naam de css aanroepen elders op de pagina. Pseudoclass is hetgene waarvan je wilt dat de CSS werkt als dit aangeroepen wordt (b.v. een hover o.i.d.) en de -gespecificeerde stijlen- zijn alleen maar de kleurtjes, afmetingen en eigenschappen.
Als ik dit teruglees begrijp ik er zelf geen barst meer van.... Dus even een voorbeeld: a.ikbenslim:hover{color:green;background:black} Ik denk dat dit een stuk duidelijker is. Ik denk ook dat het belangrijk is om te vertellen dat de eigenschappen van CSS op een webpagina "over-erven". Als je eenmaal aan iets een eigenschap hebt toegekend, wordt alles, wat afhankelijk is van dat item, ook voorzien van die eigenschap. Voorbeeldje: Als je voor de -body tag- een bepaald lettertype hebt gedefinieerd, hoef je niet voor elk ander item dit ook te doen. Het is op de hele pagina geldig. Alleen als je b.v. een div een andere lettertype wilt geven hoef je alleen maar voor DIE div het lettertype aan te passen.

Vanaf het begin van de "CSS-story" (1994) is er gelukkig veel veranderd. Op het eind van 1996 was de CSS1-standaard een feit, en het duurde nog tot het jaar 2000 voordat de eerste browser (geloof het of niet: IE5 !) in staat was om het door de browser "heen te wringen". Daarna ging het echt razendsnel, en op dit moment zijn alle browsers in staat om perfect de CSS te "verwerken". Voor de echte chauvinistische Nederlander nog een leuk "weetje": 1 van de grondleggers van de CSS was Bert Bos. 3 maal raden uit welk land hij komt... Om Håkon Wium Lie niet tekort te doen, noem ik zijn naam ook maar even. Deze slimmerik was de andere grondlegger en hij had zijn wieg staan in Noorwegen.

Op dit moment van schrijven wordt CSS1 en CSS2 volledig door de browsers ondersteund. CSS3 is al ruimschoots voorhanden, maar is nog niet tot standaard verheven. Gewoon geduld hebben. Het komt allemaal vanzelf in orde.

90 graden

Nog even een "uitsmijter" om je proberen te overtuigen om CSS zo veel mogelijk op jouw website te gebruiken... Tekst gewoon 90 graden gedraaid op jouw pagina zonder ook maar 1 letter javascript. Wat kan ik meer zeggen...

De titel van deze pagina is: 'cascading style sheets'.
De sleutelwoorden zijn : cascading, style en sheets.
De omschrijving is: 'css - cascading style sheets: perfect werkende voorbeelden / bulletproof'.