Kleurtjes, Lettertypes en Meer!
| CSS-eigenschap | Beschrijving | Voorbeeld Gebruik |
|---|---|---|
color | Stelt de tekstkleur in voor een element. | color: blue; |
font-family | Specificeert het lettertype van tekst. | font-family: Arial, sans-serif; |
font-size | Stelt de grootte van het lettertype in. | font-size: 16px; |
font-weight | Geeft de vetheid van het lettertype aan. | font-weight: bold; |
text-align | Bepaalt de uitlijning van tekst binnen een element. | text-align: center; |
text-decoration | Specificeert de decoratie van tekst (onderstrepen, etc). | text-decoration: underline; |
background-color | Stelt de achtergrondkleur van een element in. | background-color: #f0f0f0; |
padding | Bepaalt de ruimte tussen de rand en de inhoud van een element. | padding: 10px; |
margin | Specificeert de ruimte rond een element. | margin: 20px; |
border | Voegt een rand toe aan een element. | border: 1px solid black; |
border-radius | Rondt de hoeken van een element af. | border-radius: 5px; |
display | Bepaalt hoe een element wordt weergegeven. | display: inline-block; |
width | Stelt de breedte van een element in. | width: 200px; |
height | Specificeert de hoogte van een element. | height: 100px; |
position | Bepaalt de positionering van een element. | position: relative; |
top, bottom, left, right | Plaatst een element ten opzichte van de randen van zijn geplaatste container. | top: 50px; |
Raadpleeg W3Schools – CSS Tutorial voor meer info!
👩💻 Oefening: Pizzeria
We gaan wat we geleerd hebben oefenen en nieuwe CSS eigenschappen leren kennen door Onze Pizzeria wat op te pimpen!
- In jouw
pizzeriaproject, voeg eenstyles.cssbestand toe. - Vul dit bestand aan met een CSS rule die jouw
<body>element aanspreekt en het een achtergrondskleur geeft. - In jouw HTML document (bv.
index.html), voeg de nodige link om jouw HTML te linken aan jouw CSS. - Voeg deze link ook toe (best via copy+paste) aan jouw andere pagina’s.
- Bekijk het resultaat via de Live Server om het te bevestigen dat het voor al jouw pagina’s gewerkt heeft.
- Doe aan Google-Fu en zoek achter inspiratie voor een ontwerp voor jouw Pizzeria website (bv. ga naar Google images en zoek “web design Pizzeria”).
- Spendeer 20 minuten aan het mooi maken van jouw pizzeria door CSS toe te passen. Let op de tijd!