CSS

CSS is de afkorting van Cascading Style Sheets en wordt gebruikt om de opmaak te bepalen van websites. Zo wordt bijvoorbeeld met behulp van CSS ingesteld welk lettertype er wordt gebruikt en welke kleuren maar ook bijvoorbeeld de positionering van div’s waarmee de website is opgebouwd. In de afgelopen jaren heeft CSS grote stappen gemaakt en is er goede ondersteuning van browsers waardoor er steeds meer te bereiken valt met CSS. Met CSS is het mogelijk om alle HTML-tags van vorm-kenmerken te voorzien. In december 1996 werd Cascading Style Sheets, level 1 (CSS1) een ‘W3C Recommendation’ (aanbeveling).

Boxmodel

CSS3

CSS kan elemente op 4 manieren worden positioneren met het position property:

Static Elementen hebben standaard position:static; . Dat houdt in dat elementen op volgorde worden weergeven zoals ze in het HTML document zijn aangegeven; ze worden geplaatst volgens de “normal flow”. Je kunt de margin en padding van het element aanpassen om het element wat meer ruimte te geven.

Fixed Wanneer een element position:fixed; heeft, kun je met behulp van de properties top , right , bottom en left het element plaatsen ten opzichte van het browservenster. Wanneer er wordt gescrolld, verschuift het element niet, maar blijft het relatief ten opzichte van het browservenster staan. Geef je een element als position fixed, dan wordt het element uit de “normal flow” gehaald. Dat betekent dat andere elementen op de pagina het element niet meer zien en er qua positie geen rekening meer mee houden. Fixed gepositioneerde elementen kunnen dus andere elementen overlappen (of kunnen overlapt worden door andere elementen).

Relative Elementen met position:relative; kunnen worden gepositioneerd (mettop , right , bottom en left ) ten opzichte van hun oorspronkelijke locatie. De oorspronkelijke ruimte die het element normaalgesproken zou innemen, blijft “gereserveerd”. Hier kunnen andere, “static” gepositioneerde elementen niet worden geplaatst.

Absolute Deze waarde is waarschijnlijk het moeilijkst te doorgronden. Een absolute gepositioneerd element wordt relatief ten opzichte van het eerste element waar het in staat dat een position ànders dan static heeft, gepositioneerd. Als het absolute element niet in een ander element staat met de vereiste waarde (fixed,relative of absolute) is gepositioneerd, wordt het element gepositioneerd ten opzichte van het body element. Wanneer een element absolute gepositioneerd wordt, wordt het uit de normal flow gehaald en zien andere elementen het element dus niet meer.

Shorthand
Wanneer je voor margin 4 waarden, gescheiden door een spatie opgeeft, worden “met de klok mee” de waarden toegekend aan top, right, bottom, left. Wanneer je twee waarden opgeeft, kent CSS de eerste waarde aan top en bottom toe, en de tweede waarde aan right en left.
margin:10px 0 10px 0;

ID en Class
Bij een ID gebruik je een # voor de naam, dus #div1.
Bij een Class gebruik je een .voor de naam dus .divs.
HTML-tags worden in CSS gebruikt zonder tekens