Wat is CSS

CSS staat voor Cascading Style Sheets ( "waterval van stijlbladen"). De taal CSS is hoofdzakelijk bedoeld om de opmaak (uiterlijk en typografie) van de webpagina's op het internet te beschrijven. Meer in het algemeen is het doel van CSS om de markup (opmaak) van computer-documenten (bijvoorbeeld in HTML en XML) te vast te leggen.

Aanvankelijk was een markup taal zoals HTML ontworpen om niet alleen de inhoud maar ook presentatie en opmaak van documenten te verzorgen. Het werd echter al spoedig duidelijk dat het overzichtelijker was om het creëren van computerdocumenten in twee afzonderlijke taken te splitsen, te weten: inhoud en presentatie. CSS neemt het presentatiedeel voor zijn rekening. Zoals bekend bestaat een HTML document uit HTML elementen, welke gevormd worden door een begin tag, tekstuele inhoud en een eind tag. Om historische redenen heeft HTML nog steeds opmaakmogelijkheden, bijvoorbeeld heeft HTML een tag <font> waarmee type, kleur en grootte van de letters in het bijbehorende HTML element geregeld wordt; in puur HTML moet dit voor elk stukje tekst apart gedaan worden. In de huidige tijd doen we dit soort font aanpassingen liever via CSS. Het grote voordeel van CSS is dat niet alleen de opmaakregels in één klap voor een heel document vastgelegd kunnen worden, maar zelfs tegelijk voor meerdere documenten. Nu komt er een voorbeeld dat dit voordeel laat zien. Raak niet in paniek als je niet alles begrijpt, verderop in de cursus wordt alles uitgelegd.

Ouderwetse opmaak met alleen HTML:

This is a piece of
<font face="Tahoma,Verdana,Arial" color="Blue" size="3"><i><b>text</b></i></font> with
<font face="Tahoma,Verdana,Arial" color="Blue" size="3"><i><b>highlighted</b></i></font> elements in
<font face="Tahoma,Verdana,Arial" color="Blue" size="3"><i><b>it</b></i></font>.

De moderne aanpak via CSS:

<style type="text/css">
.highlight {
	color: Blue;
	font-style: italic;
	font-weight: bold;
	font-size: 120%;
	font-family: Tahoma, Verdana, Arial;
}
</style>

This is a piece of
<span class="highlight">text</span> with
<span class="highlight">highlighted</span> elements in
<span class="highlight">it</span>.

Zie je dat we dezelfde regels hergebruikten voor diverse HTML tags? Zelfs in dit triviale voorbeeld gebruikten we dezelfde regels al drie keer, maar dat is nog niet alles. We kunnen de regels in een extern bestand opslaan (hoe, daar komen we later op terug) en ze gebruiken voor alle webpagina's op je hele site. Een ander voordeel: stel dat je liever hebt dat de uitgelichte (highlighted) tekst rood is in plaats van blauw. Op de ouderwetse manier zou je alle font tags in al je documenten na moeten lopen en aanpassen. Op de CSS manier hoef je in één bestand slechts alleen de ".highlight" regel te veranderen!

Samenvatting

CSS definieert opmaak- en formateer-regels voor HTML elementen en vereenvoudigt de toepassing en hergebruik van deze regels. Bestaande regels kunnen toegepast worden op verschillende HTML elementen en op meerdere webpagina's. In deze inleiding keken we kort naar een paar regels code in CSS, maar we hebben nog niet uitgelegd waarom deze regels er uitzien zoals ze er uitzien en hoe ze werken. Dat wordt in de volgende hoofdstukken uitgelegd. We zullen bij het begin beginnen en we zullen gedetailleerd op de CSS-regels ingaan.