Cascading Style Sheets - deel 2
ook nu weer van de hand van Kees Grinwis

In de vorige aflevering van deze cursus is ingegaan op de achtergrond van CSS, de syntaxis en de relatie tot HTML. In deze aflevering zal er ingegaan worden op de meest basale CSS mogelijkheden, hierbij wordt er aandacht gegevan aan die CSS instructies die zelfs door Oregano 1 begrepen worden.

Voor we echter verder gaan met het uitdiepen van CSS gaan we eerst kijken hoe we de stijlen kunnen linken aan het actuele HTML document. We weten namelijk al wel hoe je een regel koppelt aan een element in de pagina, maar op welke manier we ervoor zorgen dat deze ook echt actief worden is nog niet ter sprake gekomen.

Er zijn 3 verschillende manieren om ervoor te zorgen dat HTML elementen gebruik gaan maken van de waardes die door de CSS-eigenschappen gedefinieerd zijn. Van deze mogelijkheden zal ik er twee uitgebreider bespreken.

De drie mogelijkheden zijn:

De eerste optie die genoemd is, het opslaan van de stijlen in een separaat bestand en deze koppelen aan de HTML is de meest flexibele oplossing. Alle stijlen kunnen nu namelijk opgeslagen worden op 1 plaats, dus als er een wijziging in de layout plaats vindt dan hoeft men maar 1 bestand aan te passen.

Er zijn twee mogelijkheden om het externe CSS-bestand te verbinden met de HTML-pagina's. De eerste is via een extra header in de HTTP-response die door de web server wordt teruggestuurd. Helaas wordt deze methode niet door alle browsers ondersteund en moet de ontwerper van de pagina hiervoor toegang hebben tot de configuratie van de website, dit laatste is echter zelden het geval.

De tweede mogelijkheid is het toevoegen van een extra <link>-element in de kop-sectie (ofwel het in <head> element) van het document. Deze methode is minder flexibel dan de 1e oplossing, maar hij is wel altijd toe te passen. Verder is het zo dat de plaats waar het CSS-bestand opgeslagen wordt toch weinig zal veranderen, mits men vooraf de tijd neemt om na te denken over het ontwerp van de website.

Het zal de lezer hopenlijk niet verbazen als ik zal zeggen dat de eerste methode het beste is, toch zal ik de tweede methode verder uitdiepen - omdat deze gemakkelijker toe te passen is en op alle browsers met CSS ondersteuning werkt. Van de eerste methode is dat helaas niet te zeggen :-(

Het maken van het bestand waar de CSS-regels in gedefinieerd zijn is simpel, gewoon een tekst-bestand met daarin alle regels en deze opslaan met de extensie .css, daarna moeten we deze koppelen aan het HTML-document. De syntaxis van dit element is betrekkelijk simpel:

<link rel="stylesheet" href="<uri naar css-bestand">

Het link element kan voor veel toepassingen gebruikt worden, door het rel-attribuut te vullen met de tekst stylesheet geven we aan dat we een stijlblad willen koppelen aan het HTML-document. Hoe de inhoud van het href-attribuut wordt bepaald dat behoren alle HTML kenners ondertussen wel te weten :).

De tweede optie om de HTML-pagina van de stijl-regels te voorzien, is deze opnemen in een speciaal daarvoor bedoeld HTML-element in de kop van het document. De syntaxis hiervan is ook niet moeilijk:

<style type="text/css">

CSS-regel (...)

</style>

Nu we het koppelen van de stijlbladen aan het HTML-document behandeld hebben kunnen we verder gaan met het uitdiepen met de diverse CSS mogelijkheden, zoals in de inleiding al is aangegeven zal ik me beperken tot de zaken die zelfs door Oregano 1 ondersteund worden,

Voor veel RISC OS gebruikers zal de Oregano browser geen onbekende zijn, deze browser zorgde er namelijk voor dat men eindelijk over een applicatie beschikte die HTML en JavaScript ondersteuning had. De browser heeft echter ook rudimentaire ondersteuning voor Cascading Style Sheets, helaas niet voldoende om alle voorbeelden uit deel 1 van deze cursus te renderen - dus zullen we het in dit deel nog niet over alle in deel 1 getoonde declaraties hebben.

We beginnen met de mogelijkheid om de tekst een andere kleur te geven, hoewel dit ook mogelijk is vanuit HTML is het vanuit CSS een stuk netter en vooral veel consequenter. Omdat het definiëren van de tekstkleur vanuit een stijlblad correcter is dan met behulp van een HTML element. zal ik dan ook de benodigde tags en attributen niet geven.

Om een tekst een andere voorgrondkleur te geven bestaat er in CSS de 'color'-eigenschap, door deze aan een CSS-regel toe te voegen zullen alle HTML elementen die aan deze regel gekoppeld worden de tekst die in het geselecteerde element en all zijn kind-elementen staat een andere kleur geven.

Om het een en andere duidelijk te maken geef ik hier een paar voorbeelden over de mogelijk syntaxis van de 'color'-eigenschap: h1 { color: blue; /* De waarde is opgegeven in "normaal" Engels. */ } em { color: #808000; /* De waarde is opgegeven in hexadecimale notatie (RRGGBB) */ } p { color: rgb(0,255,0); /* De waarde is opgegeven in RGB - bereik van 0 t/m 255 */ }

Als dit voorbeeld in Oregano geopend wordt, dan zal blijken dat de laatste waarde die opgegeven is aan de 'color'-eigenschap niet werkt. Deze waarde is echter snel om te zetten naar een hexadecimale notatie, namelijk (#00FF00).

Als men kiest voor het definiëren van de kleur in "normaal" Engels, dan zijn er in de CSS1 standaard 16 mogelijke kleuren, die reeds sinds HTML 3.2 gedefinieerd zijn. Voor alle andere tinten zal men gebruik moeten maken van de hexadecimale of RGB notatie.

Bij de hexadecimale notatie is het mogelijk om de waarde korter te presenteren als bij alledrie de kleuren de 2 digits door hetzelfde letter of cijfer gepresenteerd worden. De waarde '#FFFFFF' kan dus ook geschreven voren als '#FFF' en de waarde '#00FF00' kan dus geschreven worden door '#0F0'.

Een eigenschap die erg op de 'color'-eigenschap lijkt is 'background-color', hiermee is het mogelijk om de achtergrondkleur van een block level element of de achtergrondkleur van de tekst van een inline element in te stellen. De syntaxis van het waarde-veld van deze declaratie is identiek aan die van de waarde die bij de eigenschap voor de voorgrond kleur gebruikt wordt.

Een mogelijke stijl-definitie is dus: h1 { color: blue; background-color: aqua; } em { color: #FF0000; } p { color: rgb(0,255,0); background-color: rgb(10%,10%,10%); }

Naast het beïnvloeden van de voor- en achtergrond kleur is het ook mogelijk om de tekstgrootte en manier van afbeelden (vet en cursief) aan te passen, verder is het ook nog mogelijk om de tekst te onderstrepen. In deze aflevering zal er nog niet ingegaan worden op de declaraties waarmee het mogelijk is om het fontsoort aan te passen, waarmee small-caps (klein kapitaal) letters mogelijk zijn. Dit soort declaraties zullen later behandeld gaan worden.

We beginnen met de eigenschap 'font-size', hiermee kunnen we de grootte van de tekst aanpassen. Voor de waarde hiervan zijn er diverse eenheden mogelijk. Omdat er enorm veel mogelijkheden zijn zal ik de voorbeelden hier beperken tot de meest gebruikte eenheden, namelijk de afmetingen in punten (pt) en in pixels (px) - er zijn echter meer mogelijkheden.

Als we weer van de elementen uit gaan die in het voorbeeld gebruikt zijn, dan kunnen we ervoor zorgen dat de heading (H1) op 16pt getoond wordt door de volgende stijl-regel te gebruiken: h1 { font-size: 16pt; /* Andere mogelijkheid is 19px */ }

Het aanpassen van de grootte van de tekst is één van de vrijheden van stijlen, waarbij het in CSS wel mogelijk is om hierbij precies te bepalen hoe groot een letter wordt - in HTML bestaat deze mogelijkheid in het geheel niet.

Naast invloed op de grootte van de tekst is het met behulp van de 'font-style' en 'font-weight' eigenschappen mogelijk om de manier waarop de tekst getoond wordt te wijzigen. Verder is het mogelijk om met behulp van 'text-decoration' de inhoud van een element te onderstrepen, of er juist voor te zorgen dat deze niet onderstreept worden. Je zou bovenstaande eigenschappen kunnen gebruiken als vervanging voor de HTML elementen '<i>', '<b>' en '<u>'; helaas treden er bij het renderen van met name declaraties voor het onderstrepen rare bij-effecten op in Oregano 1.

We gaan bovengenoemde stijlen zodanig bijwerken dat het H1-element altijd onderstreept, cursief maar niet vet (bold) zal worden weergegeven - ongeacht de implementatie van de browser. Hiervoor moeten we de regel die dit element nu van een andere kleur voorziet als volgt aanpassen: h1 { color: blue; background-color: aqua; /* Nieuwe regels t.b.v. tekst eigenschappen */ text-decoration: underline; font-style: italic; font-weight: normal; }

Eigenlijk is nu met één voorbeeld duidelijk gemaakt hoe dat je de diverse eigenschappen kunt gebruiken, toch zal ik nog een voorbeeld geven. Dit voorbeeld zal namelijk laten zien hoe de cascade van CSS werkt, om dit duidelijk te maken zullen we de opmaak van het EM-element aanpassen, onder normale omstandigheden zal de tekst binnen de '<em>' en '</em>' tags namelijk cursief worden getekend.

We zullen de regel nu zo aanpassen dat dit zo blijft, maar dat de tekst ook vet zal worden weer gegeven, let op als de browser de tekst binnen het element niet cursief weergeeft dan zal deze dat ook niet worden na het toepassen van onderstaande stijl-regel: em { font-weight: bold; }

Een goede toepassing voor een declaratie met 'text-decoration', is het voorkomen dat bepaalde links niet onderstreept worden. Laten we aannemen dat we alle links die deel uitmaken van een navigatie balk niet onderstreept mogen worden, dan zouden we dit kunnen afdwingen door de volgende CSS-regel aan het document de koppelen: a.navigatie { text-decoration: none; }

Als we bovenstaande regel toepassen op de volgende HTML code, dan zal alleen de link in de normale tekst onderstreept zijn.

<p class="inhoud">

De <a href="http://www.bigbenclub.nl">Big Ben Club</a> is een vereniging van gebruikers van <a href="http://www.riscos.com/">RISC OS</a> computers. Dit zijn computers die voorzien zijn van <a href="http://www.arm.com/">ARM</a> of ARM-compatible processoren.

</p>

<p>

<a class="navigatie" href="http://www.riscos.com/">RISCOS Ltd</a>

<a class="navigatie" href="http://www.bigbenclub.nl/">Big Ben Club</a>

<a class="navigatie" href="http://www.arm.com/">ARM</a>

</p>

De links die niet voorzien zijn van de 'navigatie' classificatie zullen (als de gebruiker het onderstrepen van links heeft aangezet) onderstreept zijn, maar de links die de navigatie classificatie hebben zullen niet onderstreept zijn. Zonder een stijl-regel was dit laatste nooit te bereiken, tenzij de gebruiker hier zelf voor gekozen had - maar dan zouden alle links niet onderstreept zijn.

In deze aflevering zijn we ingegaan op de CSS-mogelijkheden die door Oregano 1 ondersteund worden, hiervan heeft u reeds schermafbeeldingen gezien. U kunt deze voorbeelden echter ook zelf uitproberen in uw eigen favoriete browser -eentje die CSS ondersteuning heeft natuurlijk- en verder experimenteren met de gegeven voorbeelden.

Sommige voorbeelden bevatten al extra CSS-regels ten opzichte van de beschreven technieken, verder is er soms gekozen om de RGB notatie te vervangen voor de hexadecimale notatie. Dit zal de bestanden echter niet minder toegankelijk maken.

In een volgende editie zullen de hier beschreven CSS-mogelijkheden wel terugkomen, maar dan als onderdeel van nieuwe eigenschappen die door Netsurf begrepen worden. Op dit moment wens ik u echter veel experimenteer-plezier onder het motto:
"Alles kan beter!"