Tijdens deze serie is al meerdere malen gewezen op de stylesheets. Deze stylesheets maken het mogelijk om een strikte scheiding tussen lay-out en ontwerp te hebben. Dankzij CSS zijn HTML-elementen uitsluitend verantwoordelijk voor de logische of semantische beschrijving van het webdocument.
In het begin kan het handig zijn om te weten hoe een stylesheet er eigenlijk uitziet. Bekijk daarom een eerste voorbeeld.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
h1 {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
p {
font-family:Geneva, Arial, Helvetica, sans-serif;
color:#0066FF;
}
</style>
</head>
<body>
<h1>PSD-Tutorials.de</h1>
<p>dein Grafik-, Web- & Fotoportal</p>
</body>
</html>Het document ziet er in de browser als volgt uit:
In het body-gedeelte van het HTML-bestand zijn twee elementen gedefinieerd:
• een kop
• een alinea
Met behulp van CSS worden deze twee elementen opgemaakt. Hiervoor wordt in het head-gedeelte een stylesheet-gedeelte gedefinieerd met behulp van style. In dit gedeelte vindt de opmaak van de elementen plaats.
Hier is nogmaals de definitie voor de kop h1:
h1 {
font-family: "Courier New", Courier, monospace;
font-size: 200%;
}
Met de getoonde syntaxis worden twee dingen bepaald:
• Het lettertype wordt bepaald.
• De lettergrootte wordt gedefinieerd.
Nu willen we ons hier eerst heel algemeen richten op de gebruikte syntaxis. Elke CSS-instructie bestaat in principe uit twee delen - een selector en de CSS-verklaring. Met behulp van de selector wordt het element gedefinieerd dat opgemaakt moet worden. Hoe deze opmaak er uiteindelijk uitziet, wordt bepaald door de CSS-verklaring. De selector staat altijd aan de linkerkant, de CSS-verklaring aan de rechterkant binnen accolades.
De daadwerkelijke CSS-verklaring bestaat op zijn beurt weer uit twee elementen, namelijk de eigenschap en de waarde. Eigenschap en waarde worden gescheiden door een dubbele punt. Na de waarde volgt een puntkomma.
Selector {
Eigenschap: Waarde;
}Stylesheets invoegen
Er zijn verschillende manieren om stylesheets in webpagina's op te nemen. Ten eerste kun je stijlaanwijzingen rechtstreeks toewijzen aan een HTML-tag. Een voorbeeld:
<h1 style="color: #0033CC;">PSD-Tutorials.de</h1>
In dit voorbeeld wordt de kop weergegeven in een blauwe kleur.
Je kunt een HTML-tag ook meerdere stijlaanwijzingen tegelijkertijd toevoegen.
<h1 style="color: #0033CC; background-color: #99FF66">PSD-Tutorials.de</h1>
Voeg ze gewoon achter elkaar toe, elk gescheiden door een puntkomma.
In principe zijn deze zogenaamde inline-stijlen alleen zinvol als afzonderlijke delen binnen een pagina individueel opgemaakt moeten worden. Normaal gesproken moet je deze directe opmaakvorm echter vermijden, omdat de HTML-code daardoor onoverzichtelijk wordt.
Centrale definitie in het hoofdgedeelte
Je kunt binnen het hoofdgedeelte van het HTML-bestand een centrale stylesheet definiëren. Hierin worden alle stijlen gedefinieerd die voor dit bestand moeten gelden.
<head>
<style type="text/css">
.text {
font-family: "Courier New", Courier, monospace;
font-size: 200%;
}
</style>
</head>
Het voordeel van deze aanpak: In tegenstelling tot de inline-variant kunnen de gedefinieerde formaten meerdere keren in het document worden gebruikt. In het vorige voorbeeld werd de CSS-klasse text gedefinieerd. (Gedetailleerde informatie over selectors zoals de hier gebruikte klasse volgt in de volgende tutorial). Deze klasse kan nu naar believen in het document worden gebruikt.
<h1 class="text">PSD-Tutorials.de</h1> <p class="text">dein Grafik-, Web- & Fotoportal</p>
Een dergelijke definitie heeft natuurlijk ook als voordeel ten opzichte van de inline-variant dat wijzigingen zeer snel kunnen worden doorgevoerd.
CSS-instructies uitbesteden
De meest praktische manier om CSS-definities te maken is het uitbesteden van de stijlen aan een extern bestand. Hierdoor kunnen willekeurig veel HTML-bestanden naar hetzelfde CSS-bestand verwijzen. Dit maakt het heel eenvoudig om uniforme opmaak voor alle bestanden van het webproject mogelijk te maken. Latere wijzigingen die van invloed zijn op alle pagina's kunnen zo probleemloos worden doorgevoerd.
<link rel="stylesheet" type="text/css" href="css/styles.css">
In de kop van het HTML-bestand wordt het link-element gedefinieerd. Binnen link wordt eerst de attribuut-waarde-combinatie rel="stylesheet" opgegeven. Daarna volgt type="text/css". Het href-attribuut wijst de betreffende CSS-file toe. Let hierbij - vergelijkbaar met het invoegen van afbeeldingen - op de juiste padverwijzing. In het huidige voorbeeld wordt ervan uitgegaan dat het CSS-bestand styles.css zich in de map css bevindt, die op zijn beurt op hetzelfde niveau ligt als het eigenlijke HTML-bestand.
In het referentiële CSS-bestand staat een normaal tekstbestand met de extensie css. Hierin worden de bijbehorende CSS-instructies gedefinieerd.
h1 {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
Alternatief voor de getoonde linkvariant is het ook mogelijk om stylesheets te importeren. Hierbij bevinden de CSS-instructies zich ook in een extern bestand. Hiervoor wordt de volgende syntax gebruikt:
<style type="text/css">
@import url("css/styles.css");
</style>
Binnen de haakjes geeft men het pad naar het te importeren CSS-bestand aan. Overigens betreft dit CSS-syntax. Daarom kan de @import-instructie ook binnen CSS-bestanden worden gebruikt. Hierdoor is het mogelijk om vanuit een stylesheet andere stylesheets aan te roepen, wat een betere ordening van de stylesheets mogelijk maakt.
Natuurlijk rijst dan de vraag of men nu link of @import zou moeten gebruiken. In principe geef ik de voorkeur aan link, omdat deze optie simpelweg sneller is en dus de prestaties van de pagina beter zijn.
Mediaspecifieke stylesheets
Men kan stylesheets definiëren voor zeer uiteenlopende media zoals bijvoorbeeld printers of het scherm. Hiervoor wordt het media-attribuut gebruikt. Daarbij kan men een stylesheet ook toewijzen aan meerdere door komma's gescheiden media.
<link rel="stylesheet" media="screen" href="css/styles.css"> <link rel="stylesheet" media="print " href="css/druck.css">
In dit geval werden twee stylesheets aangeroepen, één voor het scherm en de andere voor het geval dat de pagina wordt afgedrukt. Het CSS-bestand druck.css wordt dus geladen wanneer de afdrukfunctie van de browser wordt aangeroepen. Over het algemeen zijn de volgende media-waarden beschikbaar:
• all - Geldt voor alle uitvoermedia.
• aural - Het CSS-bestand wordt gebruikt voor spraakuitvoersystemen.
• braille - Het CSS-bestand is bedoeld voor brailleprinters met tastbare feedback, die het zogenaamde "blinde schrift" kunnen produceren.
• embossed - Hiermee worden braillepapierprinters aangesproken.
• handheld - Bedoeld voor handheldapparaten.
• print - Het CSS-bestand is geldig voor het afdrukken op papier. Browsers zouden automatisch naar dit bestand moeten teruggrijpen wanneer de afdrukfunctie wordt aangeroepen.
• projection - Deze variant is bedoeld voor geprojecteerde presentaties.
• screen - Bedoeld voor weergave op het scherm.
• tty - Het CSS-bestand is geldig voor media die een vast karakterraster gebruiken. Dit kunnen bijvoorbeeld telexmachines en terminals zijn.
• tv - Hiermee worden tv-achtige apparaten aangesproken. Hierbij wordt ervan uitgegaan dat de apparaten een lage resolutie hebben en slechts beperkt kunnen worden gescrold.
Naast de getoonde HTML-syntax via het link-element zijn er ook nog speciale CSS-varianten. Hierbij wordt @import of @media gebruikt.
<style type="text/css">
@media screen, projection {
/* Formatteer voor scherm */
}
@media print {
/* Formatteer voor afdrukken */
}
</style>
Binnen het style-element definieert men via @media een gebied voor opmaakdefinities die bedoeld zijn voor een specifiek uitvoermedium. Hierbij moet achter @media, gescheiden door spaties, een van de eerder beschreven mediatypen worden opgegeven. Meerdere mediatypen worden van elkaar gescheiden door komma's.
