Linken aan een externe style sheet
Maak een aparte CSS file. Je kunt om te beginnen bv. de CSS-regels uit
de vorige oefening erin zetten en het style blok uit die HTML pagina
weghalen.
Maak ook nog twee extra HTML files en neem in alle HTML files
een link op naar je nieuwe CSS file.
Voer nu de onderstaande opdrachten uit met style-aanpassingen in de
style sheet en indien nodig HTML-aanpassingen in de HTML-pagina's. Probeer
de vorm en inhoud zo goed mogelijk gescheiden te houden.
Gebruik van <font> <b> <u> of <i>
tags is niet toegestaan !
Hoofdstuk 1: achtergrond van de site
Opdracht: geef de achtergrond van de site een andere kleur of een
achtergrondplaatje via aanwijzingen in je style sheet.
Hoofdstuk 2: headers h1 en h2
Opdracht: zorg dat alle h1 en h2 headers links op de pagina staan.
Hoofdstuk 3: een plaatje
Opdracht: zet een plaatje op elke pagina en stel in de style sheet
in hoe de randen van het plaatje eruit zien. Maak op een van de pagina's
de randen anders dan in je style sheet is voorgeschreven door op die
pagina een document-level style blok in de header op te nemen.
Hoofdstuk 4: lokale wijzigingen
Opdracht: zorg dat alle woorden 'Opdracht' op één pagina in
je site schuingedrukt en onderstreept zijn.
Hoofdstuk 5: classes
Opdracht: plak een stuk tekst in elke pagina en maak daarin onderverdelingen
in paragrafen. Geef vervolgens in je style sheet hoe de tekst in die
paragrafen eruit ziet (font, grootte, kleur) en laat enkele paragrafen
eruit springen door die met een class andere eigenschappen te geven,
bijvoorbeeld een andere kleur of ander lettertype.
Hoofdstuk 5: tabellen
Opdracht: maak op elke pagina een tabel met drie rijen en drie kolommen.
Bepaal in je style sheet de kleuren van tekst en achtergrondkleur van
de tabellen en laat één tabel eruit springen door die met
een class andere eigenschappen te geven.