# Oefeningen CSS-opmaak
# Oefening 1: Joseph Campbell
Maak een nieuwe HTML-pagina met naam oef1_joseph_campbell.html. Koppel een extern stijlblad (CSS-bestand) aan de pagina met naam oef1_stijl.css.
Gebruik deze HTML-pagina als basis voor de opmaak: Joseph Campbell
Voorzie de HTML-pagina van de volgend opmaak:
- Algemeen lettertype (op
<body>niveau) isArial, met terugval opVerdanaen een algemeenseriffont. - Algemene regelafstand is
1.5em. - Alle koppen krijgen de tekstkleur
#ee3e80. - Alle paragrafen krijgen de tekstkleur
rgb(150, 100, 200). - Koppen van niveau 3 met klasse
werkenkrijgen het lettertypeTimes New Roman. - De tekst van het element met id
auteuris schuin- en vetgedrukt. - Het citaat is onderlijnd.
Neem een kijkje naar het gewenste resultaat.
NIEUW: font-stack
Om een font-stack te bouwen (prioriteit van lettertypes indien het eerste niet ondersteund wordt) gebruik je een lijst van lettertypes gescheiden door een komma. Lettertypes die bestaan uit meer dan één woord moeten tussen " (aanhalingstekens) geschreven worden.
font-family: font1, "font naam 2", serif of non-serif;
NIEUW: em
De eenheid em is een relatieve eenheid. Ze bepaalt een grootte of afstand ten opzichte van de tekstgrootte (font-size) van het ouderelement. De standaard tekstgrootte in een browser is 16px.
/* Tekst is 50% groter dan de tekst van het ouderelement */
font-size: 1.5em;
NIEUW: kleurwaardes
Wanneer je een kleur als waarde van een eigenschap opgeeft heb je de keuze uit verschillende notaties, om ze het volledig bereik aan kleuren eenvoudig kunnen aan te spreken.
- kleurnaam, bv.
red,blue,yellow, ... - RGB (rood-groen-blauw kanalen), bv.
rgb(40, 80, 120). - Hexadecimaal, bv.
#2E3F10. - HSL (hue-saturation-lightness), bv.
hsl(237, 80%, 50%).
NIEUW: line-height, font-weight, font-style
# Oefening 2: Boekbespreking
Maak een nieuwe HTML-pagina met naam oef2_boekbespreking.html. Koppel een extern stijlblad (CSS-bestand) aan de pagina met naam oef2_stijl.css.
Gebruik deze HTML-pagina als basis voor de opmaak: Boekbespreking
Voorzie de HTML-pagina van de volgend opmaak:
- Algemeen lettertype is
Cambria, met terugval op een algemeenseriffont. - Achtergrondkleur van de pagina is
antiquewhite. - De pagina heeft
1emaan witruimte aan de linkerkant. - Koppen van niveau 1:
- tekst is 3 keer groter dan de standaard tesktgrootte.
- onderlijnd met een dubbele
darkgreenlijn.
- Koppen van niveau 2 binnen
<article>elementen:- tekst in hoofdletters.
- afstand tussen letters is
0.3em.
- Het
<address>element dat onmiddellijk na een<h2>element staat wordt links ingesprongen met2em(witruimte aan linkerkant). - De tekst van elementen met klasse
besprekingis 10% groter dan de standaardgrootte. - Links (
<a>elementen) worden niet onderlijnd. - De tekst van elementen met klasse
scorestaat in hoofdletters. - Links binnen een
<article>element hebben de kleurgreen. - Het element met id
printen:- tekst is 50% groter dan de standaard tekstgrootte.
- witruimte binnen het element is
0.3em. - achtergrondkleur is wit.
- tekst in hoofdletters.
Neem een kijkje naar het gewenste resultaat.
NIEUW: text-transform, text-decoration, letter-spacing, text-indent
NIEUW: padding
Om binnen een blok witruimte toe te voegen gebruik je de eigenschap padding. De eigenschap heeft varianten om een specifieke kant op te maken, bv. padding-left en padding-right om respectievelijk links en rechts witruimte toe te voegen. Hierdoor kan je tekst laten inspringen of een element meer ademruimte geven.
p {
/* Geef een paragraaf extra witruimte aan linkerkant */
padding-left: 20px;
}
NIEUW: afstammeling selector, enkelvoudige zijdelingse selector
Om een element te selecteren dat een kind is van een ander element gebruik je de afstammeling selector. De syntax is:
ouderelement kindelement {
/* Stijlregels */
}
Om een element te selecteren dat onmiddellijk volgt op een ander element gebruik je een zijdelingse selector.
element1 + zijdelingselement {
/* stijlregels */
}