CSS heeft al een behoorlijke evolutie doorgemaakt:
- CSS level 3: onder ontwikkeling: bevat alles van CSS 2.1 met daarbij uitbreidingen met nieuwe selectors, opvallende randen en achtergronden, vertikale tekst, gebruikersinteractie, spraak en nog veel meer.
- CSS level 2 revision 1: bevat alles van CSS 1 met daarbij uitbreidingen voor absolute positionering, automatische nummering, pagina-eindes, ...
- CSS level 1: bevat mogelijkheden voor lettertypes, kleuren, marges, ... die bijna elke CSS-pagina nodig heeft.
Geschiedenis van CSS bij het
W3C.
De huidige standaardversie voor CSS is CSS 2.1, wij behandelen deze dan ook verder in de cursus.
Cascading Style Sheets (CSS) is een manier om stijl (lettertypes, kleuren, witruimtes, ...) aan webdocumenten toe te voegen.
Om deze cursus goed te kunnen volgen is het nodig eerst de cursus HTML onder de knie te hebben.
CSS vomen in de eeste plaats een manier om inhoud en opmaak van een webdocument te scheiden. Het is de bedoeling de CSS-opmaak van de elementen op een webpagina op een centrale plaats aan te geven, en de opmaakeigenschappen dan toe te passen op de aanwezige HTML-elementen.
CSS in HTML inbedden
CSS kan als volgt gebruikt worden op een webpagina:
- inline stijldefinitie:
In een HTML-tag neem je het attribuut style op met daarbinnen een stijdeclaratie.
Een dergelijke stijl geldt enkel voor het element waarbinnen deze stijldefinitie is opgenomen.
- stijlblok op de huidige webpagina:
Nu kan je de gebruikte stijlen op de huidige webpagina centraal in een stijlblok beheren, stijlen die je hier definiëert kunnen meerdere keren gebruikt worden.
Een stijlblok plaats je in de hoofding van de webpagina.
<STYLE type="text/css">
stijlregel(s)
</STYLE>
- extern stijblad:
Stijlen kan je ook vastleggen in een extern bestand met extensie .css. Zo kan je stijlen vastleggen die je gebruikt over een volledige website.
Op een pagina die deze stijlen gebruikt plaatst je dan in de hoofding een regel code die de browser duidelijk maakt dat het stijlbestand moet worden geladen:
<LINK HREF="stijlblad.css" REL="stylesheet" TYPE="text/css">
Stijldeclaratie
Een stijldeclaratie bestaat uit de correcte CSS-naam van een eigenschap gevolgd door een dubbele-punt en de waarde voor deze eigenschap. eigenschap-waarde paren worden gescheiden door een puntkomma.
Stijlregels
In een stijlblok of in een extern stijlbestand worden eigenschappen aangegeven met stijlregels.
In een stijlregel geef je eerst een selector en daarna tussen accolades een stijldeclaratie op.
selector {stijldeclaratie}
Selectoren komen nog uitgebreid aan bod, deze kunnen verwijzen naar een of meerder tags, naar attributen, klassen of id's.
Stijlblokken kunnen ook @-regels en commentaar ( /* ... */ ) bevatten.
Werken met inline stijlen
Je kan met het HTML-attribuut style in zowat elke tag gebruik maken van CSS:
<h1 style="color:red">Gebruik van inline stijlen</h1>
<p style="color:green">
Inline stijlen zijn <b>een eerste</b> manier om <b>CSS</b> te gebruiken.
</p>
Werken met een stijlblok
Een stijlblok gebruik je om stijldeclaraties vast te leggen voor de ganse webpagina.
Een stijlblok plaats je best in de hoofding van de webpagina.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Cursus CSS - IVO Brugge</TITLE>
<style type="text/css">
h1 { color:red }
p { color:green }
</style>
</HEAD>
<BODY>
<h1>Gebruik van een stijlblok</h1>
<p>
Inline stijlen zijn <b>een eerste</b> manier om <b>CSS</b> te gebruiken.
</p>
</BODY>
</HTML>
Werken met een extern stijlblad
inl3.css
h1 { color:red }
p { color:green }
inl3.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Cursus CSS - IVO Brugge</TITLE>
<LINK HREF="inl3.css" REL="stylesheet" TYPE="text/css">
</HEAD>
<BODY>
<h1>Gebruik van extern stijlblad</h1>
<p>Inline stijlen zijn <b>een eerste</b> manier om <b>CSS</b> te gebruiken.</p>
</BODY>
</HTML>
Om een goed inzicht te verkrijgen in CSS is het heel belangrijk in te zien hoe elementen op een webdocumenten zich tot elkaar kunnen verhouden. Het is duidelijkst dit te bekijken aan de hand van een voorbeeld:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Mijn webpagina</TITLE>
</HEAD>
<BODY>
<H1>Mijn webpagina</H1>
<P>Welkom op mijn webpagina! Mijn favoriete bands zijn:
<UL>
<LI>Ozark Henry
<LI>Novastar
<LI>Admiral Freebee
</UL>
</BODY>
</HTML>
Boomstructuur:
Uit de boomstructuur kan je afleiden dat bepaalde elementen omvat worden door andere elementen, dat bepaalde elementen zich op hetzelfde niveau bevinden als andere elementen en dat bepaalde elementen omvat worden door andere elementen.
We kunnen over bovenstaande pagina het volgende zeggen:
- De LI-elementen zijn children van het UL-elementen
- Het UL-element is parent van de LI-elementen
- Het body-element is een ancestor van het H1-element, het P-element, het UL-element en de LI-elementen
- P, H1, UL en LI en BODY zijn descendants van het HTML-element.
- De LI-elementen zijn sibling-elementen.
- P is een following-siblling van H1
- ...
Uit dit voorbeeld komen we tot volgende afspraken:
| relatie |
beschrijving |
| parent (ouder) |
Bovenliggende element in de boomstructuur: elk element heeft exact één parent, behalve het root-object dat er geen heeft. |
| child (kind) |
A is een child van B als en alleen als B de parent is van A |
| descendant (afstammeling) |
A is een descendant van B als B de parent is van A of A is child van een element C dat een descendant is van B. |
| ancestor (voorouder) |
A is een ancestor van B als B en alleen als B een descendant is van A. |
| sibling (gelijke) |
A is een sibling van B als en alleen als A en B hetzelfde parent-element hebben.
Preceding sibling: komt voor een element uit de boomstructuur
Following sibling: komt na een element uit de boomstructuur |
| preceding element (voorafgaand) |
A is preceding B als A een ancestor is van B of als A een preceding sibling is van B.
|
| following element (voorafgaand) |
A is following B als B is preceding A.
|
Je weet dat je op drie niveaus stijlen kan definiëren: in een extern stijlblad, in een stijlblok en in het style-attribuut van een element.
Je kan op elk van die niveaus een stijl kunnen definiëren voor hetzelfde element (h1, h2, p, ...).
De concrete opmaak wordt dan als volgt opgebouwd:
- Opmaak door de browser gedefiniëd
- Opmaak in stijlregels (in stijlblokken of extern stijlbestanden), naargelang de invoegpositie in het document, de door de browser vooropgestelde opmaak wordt overgenomen, de opmaak in eerdere stijlregels wordt steeds verder overgenomen.
- Opmaak gedefiniëerd in het style-attribuut
Het overnemen van opmaakeigenschappen uit vorige stijlregels wordt overerving genoemd, vandaar de term Cascading Style Sheets.
Vaak worden ook eigenschappen overgeërfd van ancestor-elementen, daar dit niet voor alle eigenschappen het geval is kan je dit specifiek aanduiden met het sleutelwoord inherit.
Je kan style sheets gebruiken door stijlen aan HTML-tags te koppelen. Daar je niet steeds gebruik zal willen maken van hoofdingen, alinea's, font-tags bestaan er twee tags die enkel tot doel hebben stijldefinities te gebruiken.
Het blok-element hiervoor is DIV
Het inline-element is SPAN
Deze tags zullen in het verdere verloop van de cursus veelvuldig gebruikt worden. Het verschil tussen blok- en inline-elementen komt ook nog uitvoerig aan de orde.
