Module IV - Cascading Style Sheets (CSS)

Module IV - Cascading Style Sheets (CSS) Cascading Style Sheets kunnen we het best vergelijken met opmaakprofielen binnen tekstverwerkers zoals Microsoft Word, Corel WordPerfect, OpenOffice Opmaakprofielen, of Style Sheets bij webpagina's laten ons toe om consistenter om te gaan met de opmaak binnen een webpagina. We kunnen Style Sheets op drie manieren gebruiken: Inline Styles Embedded Style Sheets Linked Style Sheets IV 1

1. Algemeen Cascading Style Sheets geven webontwikkelaars de mogelijkheid om de lay-our van een webpagina beter te controleren. Met CSS wordt onder meer mogelijk om gegevens beter te positioneren, de tekststijl, kleur en formaat preciezer bepalen. Ook geeft CSS de mogelijkheid om een bepaalde lettertype grootte te bepalen in punten of pixels, de spatie tussen karakters en de insprong van een alinea te bepalen, doorheen één enkel document of een volledige website. Er bestaan drie manieren om CSS toe te passen: Inline Styles Embedded Style Sheets Linked Style Sheets Naast het flexibeler omgaan met lay-out heeft het gebruik van CSS nog een ander belangrijk voordeel. Met behulp van CSS wordt het consistent opbouwen van een website veel eenvoudiger. Voorbeeld: Wanneer in een website een bepaalde titel op de ene pagina in het vet wordt weergegeven en in de andere pagina schuin, dan is de maker van de website niet consistent geweest in de lay-out van zijn titels. In slecht gemaakte websites wordt deze consistentie zelfs verbroken binnen éénzelfde webpagina. Door consistent om te gaan met de lay-out kunnen we onze website op een éénvoudige manier onderscheiden van amateuristische websites. CSS is hiervoor een uitstekend hulpmiddel omdat aan een bepaalde tag een complete stijl gekoppeld kan worden. We kunnen dit vergelijken met opmaakprofielen zoals in Microsoft Word of Corel WordPerfect. 2. Inline Styles Inline Styles zijn stijlen die opgenomen met behulp van het STYLE attribuut van de HTML tags die voorkomen binnen de <BODY> </BODY> tags. Voorbeeld: We kunnen aangeven dat een bepaalde paragraaf een andere insprong heeft dan de andere paragrafen binnen onze webpagina door een Inline Style toe te passen op deze paragraaf. Inline Styles overrulen (hebben voorrang op) Embedded Styles en Linked Style Sheets met de uitzondering van positioneringen. Het gebruik van Inline Styles is echter de minst aangewezen methode omdat ze slecht onderhoudbaar zijn en omdat ze even omslachtig zijn als het formatteren van tekst op de traditionele wijze. Om een Inline Style te maken gebruiken we het STYLE attribuut van de HTML tag waarop we de stijl willen toepassen zoals in Code Snippit 78. <p style="color: RED;">Deze tekst is rood</p> Code Snippit 78 De tekst in de webbrowser is rood gekleurd. Bij Inline Styles wordt het STYLE attribuut geplaatst binnen de OPEN tag van een HTML tag, net zoals de andere attributen van de tag. De waarde van het STYLE attribuut is verdeeld in twee delen, een attribuut (zoals COLOR) en de waarde toegekend aan het attribuut (zoals RED). Opmerking: Het attribuut en de waarde worden gescheiden door een dubbele punt (:) en niet door een gelijkheidsteken (=). IV 2

Uit Code Snippit 78 blijkt dat het gebruik van Inline Styles niet zo veel verschilt van het gebruik van de <FONT> </FONT> tag in Code Snippit 79. <p><font color="red">deze tekst is rood</font></p> Code Snippit 79 Inline Styles zijn aangewezen wanneer: We specifieke CSS mogelijkheden willen gebruiken die met behulp van standaard HTML niet mogelijk zijn. Er slechts een beperkt aantal stijlen nodig zijn. We voor een bepaalde tag een uitzondering tegen de algemene stijlen willen maken. [cd-rom]:\examples\module IV - CSS\2 Inline Styles\Example 01\example01.htm <html> <head> <title>module IV - CSS: Inline Styles: Example 1</title> </head> <body> <font face="tahoma"> <h1 style="font-size: 12pt;">Inline Styles</h1> <p style="font-size: 10pt;">Deze pagina is een eerste voorbeeld van wat we met Inline Styles kunnen doen.</p> </font> </body> </html> Code Snippit 80 Figuur 71: Wanneer we in het voorgaande voorbeeld de titel ook schuin willen weergeven met behulp van CSS, dan betekent dit dat we twee attributen moeten definiëren in het STYLE attribuut van de titel tag (<H1> </H1>). Indien we twee attributen ineens willen weergeven dan kan dit door een punt komma (;) te plaatsen tussen de attributen. De syntax van het STYLE attribuut is de volgende: STYLE="attribuut-1: waarde-1[; attribuut-2: waarde-2[;...]]" Code Snippit 81 [cd-rom]:\examples\module IV - CSS\2 Inline Styles\Example 02\example02.htm <html> <head> <title>module IV - CSS: Inline Styles: Example 2</title> </head> IV 3

<body> <font face="tahoma"> <h1 style="font-size: 12pt; font-style: italic;">inline Styles</h1> <p style="font-size: 10pt;">Deze pagina is een eerste voorbeeld van wat we met Inline Styles kunnen doen.</p> </font> </body> </html> Code Snippit 82 Figuur 72: 3. Embedded Style Sheets Embedded Style Sheets worden tussen de <HEAD> </HEAD> tags gedefinieerd en zijn enkel van toepassing binnen éénzelfde pagina. Om gebruik te maken van een Embedded Style Sheet definiëren we een stijl sectie met de <STYLE> </STYLE> tag. Deze stijl sectie bevat en aantal stijl regels, waar iedere regel een stijl definieert voor één van de HTML tags. De code in Code Snippit 83 heeft hetzelfde resultaat als deze uit Code Snippit 82, maar in Code Snippit 83 werd er gebruik gemaakt van Embedded Style Sheets ipv een Inline Style. [cd-rom]:\examples\module IV - CSS\3 Embedded Style Sheets\Example 01\example01.htm <html> <head> <title>module IV - CSS: Embedded Style Sheets: Example 1</title> <style type="text/css">  </style> </head> <body> <font face="tahoma"> <h1>inline Styles</h1> <p>deze pagina is een eerste voorbeeld van wat we met Inline Styles kunnen doen.</p> </font> </body> </html> Code Snippit 83 IV 4

Figuur 73: Het TYPE attribuut met waarde text/css is verplicht bij Embedded Style Sheets, maar niet nodig bij Inline Styles. Doordat we het TYPE attribuut gebruiken met de waarde text/css weet de webbrowser dat we met Cascading Style Sheets werken. In de HTML code uit Code Snippit 83 valt het ook op dat de eigenlijke stijlen (of opmaakprofielen) tussen de commentaar tag () staan. Dit omdat Netscape Navigator v3.x en lager, en Microsoft Internet Explorer 2.x en lager CSS niet ondersteunen. Oudere webbrowsers zoals deze zullen de stijlen negeren omdat ze tussen de commentaar tags staan. Nieuwere browsers zullen de stijlen gedefinieerd tussen de commentaar tags wel interpreteren. 3.1. Style Structuur en Syntax Wanneer we de syntax van één van de stijlen gaan bekijken (Figuur 74) dan vinden we als eerste een selector (tag of groep van tags) waarop de stijl automatisch wordt toegepast. In het voorbeeld van Figuur 74 vertellen we de browser dat de tekst voor iedere header gemaakt met de <H1> </H1> tag een puntgrootte van hebben van 12 punten en schuin gedrukt moet staan. Na de selector schrijven we de informatie over de stijl tussen accolades ({ en }). De stijl informatie bevat attributen en waarden gescheiden door een dubbele punt (:). Tussen iedere waarde en het volgende attribuut schrijven we een punt komma (;). De punt komma na de laatste waarde is niet verplicht, maar wanneer we er een gewoonte van maken om deze toch te schrijven, dan verkleinen we de kans dat we ze vergeten wanneer ze wel nodig is. Indien we meerdere waarden willen toekennen aan éénzelfde attribuut dan moeten we deze waarden scheiden door een komma. Figuur 74: De opbouw van een Embedded Style Opmerking: Wanneer we een Embedded Style Sheet gebruiken om alle paragrafen in onze webpagina een zekere insprong te geven, dan geldt deze insprong voor ALLE paragrafen. Willen we paragrafen in onze webpagina beurtelings een andere insprong geven, dan kunnen we Embedded Style Sheets gebruiken om de algemene regel te definiëren. Maar dan moeten we om de andere paragraaf nog een Inline Style gebruiken die de paragraaf iets meer of iets minder zal doen inspringen. Dit is echter omslachtig en ononverzichtelijk. Daarom is het beter om in deze situatie te werken met Classes. IV 5

3.2. Classen Met behulp van classes kunnen we naast het herdefiniëren van bestaande HTML tags als een selector, ook onze eigen namen kiezen voor een selector. Deze zelfgekozen namen worden classes genoemd. Wanneer we weten dat verschillende paragrafen van onze webpagina een andere lay-out vereisen, dan willen we vermijden dat er aan de paragraaf tag (<P> </P>) een bepaalde stijl gekoppeld wordt. Door gebruik te maken van Class namen, die meerdere keren gebruikt kunnen worden binnen een HTML pagina, geven we ons verdere flexibiliteit en kracht. [cd-rom]:\examples\module IV - CSS\3 Embedded Style Sheets\Example 02\example02.htm <html> <head> <title>module IV - CSS: Embedded Style Sheets: Example 2</title> <style type="text/css">  </style> </head> <body> <h3 class="def">duizend bom(m)en en granaten</h3> <p class="inleiding">in tijden van oorlog en vluchtelingenstromen heeft ook de planten- en dierenwereld extra te lijden. Voor natuurbescherming hebben weinig mensen in zo'n crisissituatie oog. Toch is natuurbehoud belangrijk, ook voor de naoorlogse wederopbouw. Langzaam groeit de kennis over hoe dat het best kan.</p> <p class="artikel">pakweg vijftig mensen met bier en spitvlees op een grasveld in de Rwandeze middagzon. Telkens weer staat iemand op en houdt een gloedvol betoog in de landstaal, het Kuryarwanda. Op de achtergrond verrijzen de vulkanen van het Virunga bergmassief van het Oost-Afrikaanse Grote- Merengebied. Daar zwerven 's werelds laatste - ongeveer 675 - berggorilla's (Latijn: Gorilla beringei beringei) rond. Zij zijn beroemd geworden door de film <i>gorillas in the mist</i>, over leven en werk van gorillaonderzoekster Dian Fossey. Vandaag is het voor de parkwachters van het Rwandese Vulcans National Park een feestdag. In een plenaire 'doopvergadering' kiezen zij voor alle dit jaar geboren gorillajongen een passende naam.</p> <p class="bron">bron: EOS Magazine - April 2004</p> </body> </html> Code Snippit 84 IV 6

Figuur 75: 4. Linked Style Sheets We spreken van Linked Style Sheets wanneer we de stijl informatie uit onze webpagina halen en in een apart document gieten. In de webpagina wordt dan verwezen (een link gelegd) naar de pagina met stijlinformatie. Het werken met Linked Style Sheets heeft als grote voordeel dat wanneer we een bepaalde stijl willen wijzigen, dat we dit slechts op één plaats moeten doen. We hoeven dus niet alle pagina's binnen onze website te controleren en de nodige wijziging te doen. De verwijzing naar een extern (Linked) Style Sheet plaatsen we tussen de <HEAD> </HEAD> tags in de webpagina met behulp van de <LINK> tag. <link rel="stylesheet" href="styles.css"> Code Snippit 85 In Code Snippit 85 wordt het bestand styles.css gelinkt aan onze webpagina. De extensie.css geeft aan dat het bestand een Cascading Style Sheet is. Wanneer we dit zouden toepassen op de webpagina van Code Snippit 84 dan krijgen we de volgende bestanden: [cd-rom]:\examples\module IV - CSS\4 Linked Style Sheets\Example 01\example01.css h2.def {COLOR: BLUE; FONT-FAMILY: Tahoma; FONT-SIZE: 16PT;} h3.def {COLOR: BLUE; FONT-FAMILY: Tahoma; FONT-SIZE: 14PT;} p.inleiding {FONT-FAMILY: Tahoma; FONT-SIZE: 10PT; FONT-STYLE: ITALIC;} p.artikel {FONT-FAMILY: Tahoma; FONT-SIZE: 10PT;} p.bron {FONT-FAMILY: Tahoma; FONT-SIZE: 8PT; FONT-WEIGHT: BOLD;} Code Snippit 86 [cd-rom]:\examples\module IV - CSS\4 Linked Style Sheets\Example 01\example01.htm <html> <head> <title>module IV - CSS: Linked Style Sheets: Example 1</title> <link rel="stylesheet" href="example01.css"> </head> <body> <h3 class="def">duizend bom(m)en en granaten</h3> <p class="inleiding">in tijden van oorlog en vluchtelingenstromen heeft ook de planten- en dierenwereld extra te lijden. Voor IV 7

natuurbescherming hebben weinig mensen in zo'n crisissituatie oog. Toch is natuurbehoud belangrijk, ook voor de naoorlogse wederopbouw. Langzaam groeit de kennis over hoe dat het best kan.</p> <p class="artikel">pakweg vijftig mensen met bier en spitvlees op een grasveld in de Rwandeze middagzon. Telkens weer staat iemand op en houdt een gloedvol betoog in de landstaal, het Kuryarwanda. Op de achtergrond verrijzen de vulkanen van het Virunga bergmassief van het Oost-Afrikaanse Grote- Merengebied. Daar zwerven 's werelds laatste - ongeveer 675 - berggorilla's (Latijn: Gorilla beringei beringei) rond. Zij zijn beroemd geworden door de film <i>gorillas in the mist</i>, over leven en werk van gorillaonderzoekster Dian Fossey. Vandaag is het voor de parkwachters van het Rwandese Vulcans National Park een feestdag. In een plenaire 'doopvergadering' kiezen zij voor alle dit jaar geboren gorillajongen een passende naam.</p> <p class="bron">bron: EOS Magazine - April 2004</p> </body> </html> Code Snippit 87 Figuur 76: Het resultaat van deze broncode bekeken in een browser is gelijk aan het resulaat van de voorbeelden opgelost met behulp van een Embedded Style Sheet. 5. De voor- en nadelen naast elkaar Inline Styles Embedded Style Sheets Linked Style Sheets Bruikbaar voor beperkte hoeveelheden van style definities Om andere style definities te vervangen Met behulp van classes kunnen er meerdere stijlen per tag gedefinieerd worden Groepering methodes kunnen gebruikt worden Er moeten geen downloads gebeuren om de stijl informatie Stijlen voor meerdere documenten kunnen in één keer worden onderhouden Er kunnen classes gemaakt worden om meerdere stijlen per tag in verschillende documenten Groepering methodes kunnen gebruikt IV 8

De stijl definitie wordt niet gescheiden van de inhoud Er kunnen geen classes gemaakt worden om meerdere tag types te controleren Het is niet mogelijk om stijlen voor meerdere documenten in één keer te onderhouden Groepering methodes kunnen niet gebruikt worden om contextgevoelige tag condities te maken te ontvangen Het is niet mogelijk om stijlen voor meerdere documenten in één keer te onderhouden worden. De stijl informatie moet eerst worden gedownload alvorens een pagina weergegeven kan worden Het document wordt pas weergegeven als de stijl informatie gedownload is Overkill voor kleinere hoeveelheden van stijles Tabel 2: De voor- en nadelen van werken met de verschillende methodes van StyleSheets. Opmerking: Uit de voorgaande tabel blijkt dat iedere methode van het gebruik van CSS zijn voor- en nadelen heeft. Het is daarom niet mogelijk om aan te geven welke de beste manier is voor het gebruik van CSS. In een goedgebouwde webpagina zullen we waarschijnlijk alle methodes terugvinden. IV 9