CSS staat voor Cascading Style Sheets.
Het is de taal waarmee je de opmaak en het uiterlijk van HTML-pagina's bepaalt.
Met CSS kun je kleuren, lettertypes, marges, layout en nog veel meer instellen.
CSS kan direct in HTML, in de head, of via externe bestanden worden gebruikt.
Je kunt op drie manieren Css toevoegen aan Html:
1. Door in een html element style="" toe te voegen
2. door boven in de header <style></style> toe te voegen
3. en door een extern css bestand te linken
Selectors bepalen op welke HTML-elementen de stijl van toepassing is.
Voorbeelden:
CSS heeft honderden eigenschappen.
Enkele belangrijke:
Elk HTML-element is een rechthoekige box.
Bestaat uit: content → padding → border → margin.
Dit bepaalt hoe elementen in elkaar passen en ruimte gebruiken.
de meest bekende pseudo classes zijn:
:hover activeert als de muis over het element hovert
:focus activeert als het element geklikt wordt en wordt weer gedeactieveert als een ander element de focus krijgt
:visited activeert als je als eens op een link hebt geklikt, dus alleen voor links en kan bijna alleen maar kleuren aanpassen.
| CSS Eigenschap / Selectors | Beschrijving |
|---|---|
| color | Tekstkleur instellen |
| background-color | Achtergrondkleur instellen |
| background-image | Achtergrondafbeelding instellen |
| background-repeat | Hoe een achtergrondafbeelding wordt herhaald |
| background-size | Grootte van de achtergrondafbeelding instellen |
| font-size | Lettergrootte instellen |
| font-family | Lettertype kiezen |
| margin | Ruimte buiten een element |
| padding | Ruimte binnen een element |
| border | Rand rond een element |
| border-style | Soort rand instellen (solid, dashed, dotted) |
| border-width | Dikte van de rand instellen |
| border-color | Kleur van de rand instellen |
| border-radius | Ronde hoeken instellen |
| outline | Rand rond een element zonder ruimte in te nemen |
| width / height | Breedte en hoogte van een element |
| min-width / max-width | Minimale en maximale breedte van een element |
| min-height / max-height | Minimale en maximale hoogte van een element |
| display | Hoe een element wordt weergegeven (block, inline, flex) |
| position | Positionering van een element (static, relative, absolute, fixed, sticky) |
| top / right / bottom / left | Positie van element bij gebruik van position |
| z-index | Stacking volgorde van elementen |
| overflow | Wat er gebeurt als inhoud buiten de box valt |
| overflow-x / overflow-y | Specifieke overflow voor horizontale of verticale as |
| visibility | Zichtbaarheid van een element instellen (visible / hidden) |
| opacity | Doorzichtigheid van een element instellen |
| float | Element laten zweven links of rechts (verouderd) |
| clear | Het effect van floated elementen stoppen |
| flex / justify-content / align-items | Flexbox layout eigenschappen |
| grid / grid-template-columns / grid-gap | Grid layout instellen en rijen/kolommen definiëren |
| text-align | Tekst horizontaal uitlijnen |
| vertical-align | Elementen verticaal uitlijnen (inline) |
| line-height | Regelhoogte instellen |
| letter-spacing | Ruimte tussen letters instellen |
| white-space | Omgaan met witruimtes in tekst |
| overflow-wrap / word-wrap | Hoe woorden afgebroken worden bij te lange tekst |
| clip / clip-path | Een element afknippen of vorm geven |
| object-fit | Hoe afbeeldingen of video’s in hun container passen |
| transition | Overgangseffecten voor eigenschappen |
| transform | Roteren, schalen, verplaatsen of kantelen van een element |
| box-shadow | Schaduw toevoegen aan een element |
| cursor | Soort cursor bij hover instellen |
| hover / active / focus | Pseudo-classes voor interactieve elementen |