Cursus CSS - deel 1: Inleiding, syntaxis en linken aan de HTML-pagina

Trefwoorden: CSS, website, cursus, geschiedenis, syntaxis, commentaar, linken, stylesheet, import

1. Inleiding


In deze cursus gaan we CSS van dichterbij bekijken. In dit deel gaan we nog niet echt veel code leren. Eerst volgt een uitleg over wat CSS precies is en waarom het zo handig is. Daarna bekijken we via een kleine CSS-regel de syntaxis die ook verder in de cursus gebruikt zal worden. Als laatste bespreek ik nog op welke manieren je CSS aan je HTML-pagina kan linken.
Het zou heel veel werk zijn om in deze cursus alle mogelijkheden van CSS te behandelen omdat er gewoon enorm veel mogelijkheden zijn. Daarom ga ik mij beperken tot de belangrijke dingen die in een paar delen zullen behandeld worden. Eénmaal je de basis kent is het niet zo moeilijk meer om zelf stijlkenmerken toe te passen, omdat deze allemaal op dezelfde manier werken :).

2. Over CSS


2.1. Wat is het?

CSS staat voor Cascading Style Sheets. Het is een manier om webpagina's snel en gemakkelijk een opmaak te geven. CSS moet altijd gebruikt worden samen met HTML. Met CSS geef je bepaalde HTML-tags een opmaak: de kleur, het lettertype, de breedte, een rand, ... bijna alles kan je aanpassen met CSS.

Het voordeel van CSS is dat je nu slechts één file zal moeten aanpassen om de opmaak van je website te wijzigen. Je zal je hieraan wellicht al geërgerd hebben als je een HTML site had waarvan je de opmaak wilde wijzigen. Op elke pagina moet je telkens alle tags gaan wijzigen. Bovendien heb je met HTML ook niet echt veel opmaakmogelijkheden. CSS is echter speciaal gemaakt voor de opmaak van een pagina en de mogelijkheden zijn enorm uitgebreid.

Als je echt goed met stylesheets omgaat in je website moet alles normaal gescheiden blijven. HTML dient voor de structuur van de website en CSS voor de opmaak. Als er dan iets gewijzigd moet worden aan de opmaak, hoef je slechts één bestand aan te passen. Dat is meteen ook de kracht van CSS in combinatie met HTML

Opgelet!: Als je dus nog geen HTML kent zal deze cursus heel moeilijk lijken. Het is dus sterk aangeraden om eerst eens de Cursus HTML door te nemen :).


2.2. geschiedenis

In de tijd van HTML 2.0 waren de opmaakmogelijkheden op het web miniem. Alle tekst werd gewoon zwart op het scherm gezet met de grootte die de browser bepaalde.
Netscape introduceerde toen meerdere opmaakmogelijkheden voor HTML zoals we die nu ongeveer kennen. Elke webmaster begon dit uitvoerig te gebruiken en al gauw werd het web een heus kleurboek (maar jij weet even goed als ik dat dit niet echt mooi is :)).

Webmasters wilden al gauw meer en vooral beter. Ontwikkelaars begonnen ook te beseffen dat HTML niet geschikt was om pagina's op te maken. Men had ook al door dat het veel gemakkelijker en beter was om stijlen onder te brengen in een stijlblad (stylesheet) en om dat blad dan aan een webpagina te koppelen. Met deze ideeën ontwikkelde men een taal die style sheets beschreef: Cascading Style Sheets (overlappende stijlbladen).
Vanaf wordt CSS door het W3C erkend en vooral aanbevolen om te gebruiken.

3. Syntaxis


De belangrijkste syntaxis van CSS leg ik uit aan de hand van een kleine CSS-regel die hieronder staat. De code zal nu misschien wat moelijk lijken, maar in de loop van de cursus moet dat normaal volledig duidelijk worden :).
CODE
  1. h1
  2. {
  3.         color: #000000;
  4. }


De selector
Hier is h1 de selector. De selector verwijst altijd naar het HTML element waarop de stijl toegepast moet worden, in dit geval de h1-tag. Alles tussen de accolades na de selector is de stijl die op dat element toegepast wordt.
Selectors kunnen ook neergeschreven worden in niveaus volgens het zogenaamde DOM-model. Als je bijvoorbeeld een strong-tag in een p-tag hebt, wordt dit de selector om die strong-tag aan te roepen en een stijl te geven:
CODE
  1. p strong
  2. {
  3.         ...stijl...
  4. }

Soms kan het zijn dat je heel erg lange selectors hebt, maar voor de browser wordt het zo alleen maar duidelijker welke tag je bedoeld :).

De property en value
De property is in bovestaande code het woord "color". Color is één van de properties of eigenschappen van CSS. Met de vele eigenschappen van CSS kan je stijlen aan je HTML toekennen door deze een aangepaste value te geven. Hier is de waarde of value van color #000000. Dit zal er toe lijden dat de h1-tag een zwarte tekstkleur heeft. Als je de waarde verandert naar #ffffff zal je tekst een witte kleur hebben en zo bestaan er nog oneindig veel mogelijkheden. (Als je niet direct weet wat #000000 is of hoe de hexadecimale schrijfwijze van kleuren werkt kan je dit deel van de HTML-cursus eens bekijken.)

De declaration
De declaration wordt gevormd door de property en value samen. Een declaration wordt beëindigd met een PUNTKOMMA ( ; ). Dit is zeker belangrijk als je meerdere declaration hebt, anders kan er veel misgaan.
Je kunt meerdere declarations plaatsen bij één selector op voorwaarde dat deze zich allemaal bevinden tussen de accolades na de selector.

Ik zeg het nog eens, want ik kan het niet genoeg zeggen. Plaats altijd een puntkommma na je declaration. De browser houd geen rekening met de break die je plaatst. Als je dus meerdere declarations hebt bij een selector maar zonder de puntkomma achter elke declaration, dan zal de browser dit interpreteren als één declaration. Met als gevolg dat de browser die declaration niet kan thuisbrengen en dus geen stijl zal genereren.

De CSS-rule
De CSS-rule of CSS-regel is de volledige code die hierboven staat. Een CSS-regel bevat dus de selector en de bijhorende declarations tussen accolades.

De stylesheet
De stylesheet is het volledige stijlblad die je aan je website of pagina kan linken. Een stylesheet bevat meestal meerdere CSS-rules.

4. Styles linken aan de HTML


4.1. Het style-attribuut

Een stijl geven aan een HTML-tag kan op vier manier die hier beschreven worden. De eerst is het style-attribuut.

Het style-attribuut kan gewoon opgenomen worden in een HTML-tag. Het werkt zoals de attributen die je kent van bij HTML. Je plaatst het woord "style" in de tag en de declarations (de stijl dus) die je wenst toe te passen komen tussen de aanhalingstekens. Er komt dus geen selector aan te pas.
CODE
  1. <h1 style="color:#000000;font-style:Arial;">Kop</h1>

Je denkt nu misschien: Waarom mag ik dan niet de gewone HTML-attributen gebruiken, het zal evenveel werk zijn als ik dan iets wil wijzigen aan de opmaak. In feite is dat juist, maar toch ben je tweemaal verkeerd.
Ten eerste dient het style-attribuut niet om de hele opmaak van je site vast te leggen. Dat doe je best in een aparte stylesheet. Het style-attribuut kan je gebruiken op een HTML-element die een uitzondering vormt op de stylesheet. De normale opmaak uit de stylesheet wordt overschreven door het style-attribuut, daardoor zal dat element een andere opmaak hebben.
Ten tweede is het ook beter om CSS te gebruiken i.p.v. de HTML-attributen omdat je opmaak dan bij CSS blijft en de structuur bij je HTML. Dat is ook de eigenlijke bedoeling van CSS.

4.2. De style-tag

Het style-attribuut is niet meteen de handigste optie om een opmaak te geven aan je HTML. De style-tag daarentegen is dit wel. Deze komen in de head van je pagina en ertussen kan je jouw volledige stylesheet plaatsen (meerdere CSS-rules dus :)).
CODE
  1. <html>
  2.  
  3. <head>
  4. <title>Pagina met CSS</title>
  5. <style type="text/css">
  6. h1
  7. {
  8.         color: #000000;
  9.         font-style: Arial;
  10. }
  11. p
  12. {
  13.         color: #818181;
  14.         padding: 3px;
  15. }
  16. </style>
  17. </head>
  18.  
  19. <body>
  20.  
  21. <h1>Kop van de pagina</h1>
  22.  
  23. <p>Dit is tekst en nog meer tekst nog meer tekst nog meer tekst nog meer tekst nog meer tekst nog meer tekst nog meer tekst nog meer tekst nog meer tekst nog meer tekst nog meer tekst nog meer tekst nog meer tekst nog meer tekst nog meer tekst nog meer tekst nog meer tekst nog meer tekst nog meer tekst nog meer tekst nog meer tekst opgemaakt met CSS.</p>
  24.  
  25. </body>
  26. </html>

Je hoeft je alweer niets aan te trekken van de CSS-code zelf maar wel van de style-tags. Het verplichte attribuut bij deze tags is "type", met de waarde "text/css". De styles tussen de style-tags gelden enkel op de pagina waarop ze staan. Je zou dus kunnen op elke pagina een style-tag plaatsen en daartussen alle styles. Maar als er dan iets verandert heb je nog steeds veel werk om het aan te passen. Daarom hebben we nog de volgende manieren die volledige stylesheets importeren.

4.3. De link-tag

De vorige manieren om opmaak aan HTML te geven zijn perfect bruikbaar. Maar als er iets wijzigt is het nog steeds veel werk om alles aan te passen. Daarom bestaan er ook manieren om volledige stylesheets te importeren. De eerste mogelijkheid is de link-tag die je ook in de head van je pagina plaatst.
Je plaatst alles CSS-rules in één bestand die je opslaat met de extensie ".css". Via de link-tag kan je dat bestand dan importeren naar jouw HTML-pagina.
Als voorbeeld gaan we de code die je bij de style-tag vindt omvormen. Alle CSS slaan we op in één bestand styles.css, de style-tag wijzigt in een link-tag en de pagina slaan we op als pagina.html. Dan komt dit er zo uit te zien.
CODE - styles.css
  1. h1
  2. {
  3.         color: #000000;
  4.         font-style: Arial;
  5. }
  6. p
  7. {
  8.         color: #818181;
  9.         padding: 3px;
  10. }

CODE - pagina.html
  1. <html>
  2.  
  3. <head>
  4. <title>Pagina met CSS</title>
  5. <link rel="stylesheet" href="styles.css" type="text/css" />
  6. </head>
  7.  
  8. <body>
  9.  
  10. <h1>Kop van de pagina</h1>
  11.  
  12. <p>Dit is tekst en nog meer tekst nog meer tekst nog meer tekst nog meer tekst nog meer tekst nog meer tekst nog meer tekst nog meer tekst nog meer tekst nog meer tekst nog meer tekst nog meer tekst nog meer tekst nog meer tekst nog meer tekst nog meer tekst nog meer tekst nog meer tekst nog meer tekst nog meer tekst nog meer tekst opgemaakt met CSS.</p>
  13.  
  14. </body>
  15. </html>

Zoals je ziet is de link-tag een alleenstaande tag en wordt op de speciale manier afgesloten ( /> ).De link-tag heeft 3 verplichte attributen die voor CSS de volgende waarden hebben. Het attribuut "type" weer met "text/css", het attribuut "rel" met "stylesheet" en "href" roept het bestand aan. Bij href schrijf je dus het pad naar de stylesheet. (Zoals je ziet werkt bovenstaande code enkele als styles.css en pagina.html in dezelfde map staan. Als dit bij jou anders is moet je er dus op letten als je jouw stylesheet linkt.)
In het bestand styles.css hoef je dus niets speciaals te doen. De style-tag plaatsen hoeft ook niet, de zuivere CSS-rules zijn voldoende.

4.4. Import

De link-tag is heel handig en is de beste methode om jouw stylesheet aan je pagina te linken. Het kan natuurlijk zijn dat je jouw stylesheet wil linken, maar tegelijk nog enkele kleine stijlen wil toevoegen via de style-tag. Je zou dan kunnen een link-tag gebruiken en daarna een style-tag met de andere styles.
CSS heeft daar echter een andere mogelijkheid voor, namelijk een importmogelijkheid vanuit de style-tag.
CODE
  1. <html>
  2.  
  3. <head>
  4. <title>Pagina met CSS</title>
  5. <style type="text/css">
  6. @import url(styles.css);
  7. h1
  8. {
  9.         color: #000000;
  10.         font-style: Arial;
  11. }
  12. </style>
  13. </head>
  14.  
  15. <body>
  16.  
  17. <h1>Kop van de pagina</h1>
  18.  
  19. <p>Dit is tekst en nog meer tekst nog meer tekst nog meer tekst nog meer tekst nog meer tekst nog meer tekst nog meer tekst nog meer tekst nog meer tekst nog meer tekst nog meer tekst nog meer tekst nog meer tekst nog meer tekst nog meer tekst nog meer tekst nog meer tekst nog meer tekst nog meer tekst nog meer tekst nog meer tekst opgemaakt met CSS.</p>
  20.  
  21. </body>
  22. </html>

Je kan dus ook @import gebruiken om jouw stylesheet te linken. De werking ervan is hetzelfde als bij de link-tag. Als je echter geen aanvullende styles meer plaatst tussen jouw style-tags is het sowieso beter om gewoon de link-tag te gebruiken (en het scheelt ook wat typwerk :)).
@import werkt enkele tussen de style-tags of in een .css-bestand. Als je dus een stylesheet-bestand wil toevoegen aan een anders stylesheet-bestand moet je ook @import gebruiken. De link-tag zal daar namelijk niet werken omdat dit HTML is.

5. commentaar


Zoals in HTML (en ook in vele andere talen) kan je ook in CSS commentaar aan je code toevoegen. In CSS plaatsen je jouw commentaar tussen /* en*/. Alles tussen deze tekens wordt door de browser niet geïnterpreteerd en beïnvloed de werking van je code dus niet.
CODE
  1. /* Opmaak van de koppen */
  2. h1
  3. {
  4.         color: #000000; /* De tekstkleur wordt zwart */
  5.         font-style: Arial;
  6. }
  7. /* Opmaak van de paragraaf */
  8. p
  9. {
  10.         color: #818181;
  11.         padding: 3px;
  12. }


6. Slot


Ik hoop dat je na dit deel van de cursus een goed beeld hebt van CSS, wat het is en wat de voordelen zijn. Hoe verder je komt in deze cursus, hoe meer je zult zien dat CSS een heel handige taal is waarvan de mogelijkheden eindeloos zijn.
CSS is een taal die je op veel manieren kan implementeren in je HTML-pagina en zoals bij veel talen kan je ook commentaar schrijven bij je code.
Vergeet ook niet: Oefening baart kunst.

Als je nog vragen hebt, mag je die zeker stellen in de forums ;).
Dit artikel werd geschreven door Simon op maandag 13 augustus 2007 om 13:23 en werd sindsdien 10207 keer gelezen.

  • Pagina
  • 1 van 1

Geen reacties gevonden
Er werden nog geen reacties bij dit artikel geplaatst.
  • Indien je denkt iets te kunnen toevoegen aan het artikel, kan je zelf een reactie schrijven via de koppeling Plaats een reactie bij dit artikel hieronder.
  • Indien je andere commentaar (iets wat niet meteen functioneel bijdraagt aan het artikel zelf) hebt, kan je een bedankje formuleren via de koppeling Plaats een bedankje bij dit artikel hieronder.