Cascading Style Sheets

Uit Wikibooks

Cascading Style Sheets, vaak afgekort als CSS, is een instructieset voor het opmaken van documenten, en dan voornamelijk HTML/XHTML- en XML-documenten. In de modules over dit onderwerp worden alle aspecten en eigenschappen besproken die beschikbaar zijn in CSS 2.1, en wordt vooruitgekeken naar CSS 3.

Op dit moment ondersteunen bijna alle moderne browsers CSS 2.0 volledig (uitgezonderd Internet Explorer: de ondersteuning van CSS 2.0 in Internet Explorer is verre van optimaal).

[bewerk] Inleiding en basiskennis

[bewerk] Cascading Style Sheets/Inleiding

CSS is in tegenstelling tot HTML een taal die zich niet zo zeer richt op de inhoud van een document, maar meer op de opmaak. Het is ook een taal die nooit op zichzelf staat. Als een pagina CSS moet bevatten moet hij eerst en vooral ook HTML bevatten. Als je niet bekend bent met HTML raad ik je ten zeerste aan om dit eerst grondig te bestuderen. CSS valt in het moderne webdesign haast niet meer weg te denken, niet alleen omdat het de broncode van een HTML-pagina veel overzichtelijker maakt dan wanneer er font-tags worden gebruikt, maar ook omdat CSS veel meer mogelijkheden biedt qua opmaak.

Bovendien zorgt het gebruik van CSS ervoor dat de bestandsgrootte kleiner wordt, wat dan weer resulteert in een snellere weergave van de website.

Ten slotte kan CSS gebruikt worden om de toegankelijkheid en vindbaarheid van je website te verbeteren.

[bewerk] Cascading Style Sheets/Structuur

CSS heeft altijd ongeveer dezelfde syntaxis, oftewel wordt het toegepast elke keer dat een bepaalde tag voorkomt zoals hier:

tag {
  eigenschap: waarde;
  eigenschap: waarde;
  }

Zoals je kan zien begin je altijd eerst met te vermelden over welke tag je het hebt, daarna geef je aan tussen twee accolades wat er moet gebeuren, dit is altijd eerst de eigenschap waar het betreking op heeft, gevolgd door ":" en dan de waarde van de eigenschap, gevolgd door een ";" om aan te geven dat deze stijlregel is afgelopen en de volgende begint, dit is echter alleen nodig als er nog een regel na komt.

Je kan deze eigenschappen ook laten gelden door ipv. één tag, meerdere tags neer te zetten gescheiden door een komma. Vervolgens kan je op deze manier ook gebruik maken van classes:

.groepsnaam {
  eigenschap: waarde;
  eigenschap: waarde;
  }

De eigenschappen gelden dan alleen voor de tags die de eigenschap class="groepsnaam" hebben meegekregen. Als je wil dat deze eigenschappen alleen gelden voor een bepaalde soort tag dan wordt het "tag.groepsnaam" in plaats van ".groepsnaam".

Ten laatste kan je ook nog gebruik maken van ID's zoals hier:

#idnaam {
  eigenschap: waarde;
  eigenschap: waarde;
  }

Dit wordt gebruikt voor dingen die maar op één bepaalde plaats in het document voorkomen. In dit geval gelden de eigenschappen alleen voor de tags die de eigenschap: id="idnaam" hebben meegekregen.

[bewerk] Cascading Style Sheets/Verbinden

Stijlbladen kunnen op drie verschillende manieren worden verbonden met het HTML-document: inline, intern en extern. De krachtigste manier is extern, dit is een apart document dat kan worden gebruikt voor meerdere webpagina's tegelijk. Het stijlblad kan worden geschreven in eenderwelke text-editor (meestal kladblok) en mag geen html-tags bevatten, enkel stijlregels. Het document dient te worden opgeslagen met de .css-extensie. Om een stijlblad te verbinden met een webpagina, moet de volgende regel worden toegevoegd in de head-sectie van het HTML-document:

<link rel="stylesheet" type="text/css" href="stijl.css">

Om bovenstaande voorbeeld te laten werken moet het de stijlpagina natuurlijk opgeslagen zijn met de naam stijl.css.

Een andere manier om css te verbinden met je webpagina is intern. Op deze manier zet je je stijlregels bovenaan in je document in de head-sectie. Dat doe je op de volgende manier:

<style type="text/css">
  hier komen de stijlregels
</style>

Bovenstaande code moet dan ergens in de head-sectie worden gezet.

De laatste manier om CSS te verbinden met je webpagina is inline. Dit is de minst krachtige manier om gebruik te maken van CSS, omdat je hierbij de CSS nog altijd in de tags zelf zet, het is dus af te raden om deze manier te gebruiken. Het toevoegen van een inline stijlregel gebeurt op de volgende manier:

<tag style="eigenschap: waarde; eigenschap: waarde">

Zoals je kan zien, maakt deze manier de code nog altijd erg onoverzichtelijk.

[bewerk] Documenten opmaken

[bewerk] Cascading Style Sheets/Boxmodel

Het boxmodel in CSS

[bewerk] Cascading Style Sheets/Borders

Randen

[bewerk] Cascading Style Sheets/Margin en Padding

Ruimtes creëren.

[bewerk] Cascading Style Sheets/Exact beheren

Werken met opties voor exacte opmaak

[bewerk] Cascading Style Sheets/Positioneren

Layers en boxen uitlijnen en vastzetten

[bewerk] Cascading Style Sheets/Tekst

Tekst opmaken

[bewerk] Cascading Style Sheets/Lettertypes

Uitgebreide lettertypefuncties

[bewerk] Cascading Style Sheets/Tabellen en divs

Werken met tabellen en divs.

[bewerk] Cascading Style Sheets/Hyperlinks

Hyperlinks opmaken

[bewerk] Detailoverzichten

[bewerk] Cascading Style Sheets/Kleuren

Werken met kleuren: de mogelijkheden.

[bewerk] Cascading Style Sheets/Mediatypes

Ontwerpen voor bepaalde mediatypes.

[bewerk] Cascading Style Sheets/Workarounds

Tips om alles in alle browsers te laten werken.

[bewerk] Overzichten

[bewerk] Cascading Style Sheets/Properties

Overzicht van alle eigenschappen.

[bewerk] Cascading Style Sheets/Zie ook

Links naar uitgebreide naslagwerken en bespreking van boeken.

De bovenstaande pagina's hebben als doel om kennis op te doen over hoe CSS gebruikt kan worden, maar ook om uit te leggen hoe geavanceerde technieken te gebruiken zijn. Je kan best met de voorbeelden aan de slag gaan, zodat je actief kennis opdoet. Aarzel niet om stukken te kopiëren en er mee te experimenteren!

De wijzigingen aan deze pagina van voor 15 april 2007 vallen alléén onder de GFDL, en niet onder de CC-BY-SA-licentie. U kunt de inhoud van deze pagina dan ook alleen onder de voorwaarden van de GFDL (her)gebruiken. Niet alle bijdragers van voor 15 april 2007 hebben hun werk vrijgegeven onder de dubbellicentie GFDL&CC-BY-SA. Kijk hier voor meer informatie. Lijst van gebruikers die hun wijzigingen niet hebben vrijgegeven onder beide licenties