Oefeningen les 4: CSS basis deel 1

Deze oefeningen geven je de kans om de leerstof van les 4: CSS basis deel 1 in te oefenen.

De eerste 6 oefeningen zijn driloefeningen en per oefening is er een map aangemaakt met daarin een index.html en een map css die het externe css-bestand bevat style.css.
De opgave van de oefeningen staat in het css-bestand.

---

Oefening 1: Type selectors.

Open de map oefening01-type-selectors. Leg in index.html de link naar de externe stylesheet style.css.
De opgave staat in style.css. Voeg stijlregels toe aan het css-bestand. De HTML mag je niet wijzigen.

Eindresultaat:

Oefening 2: Backgrounds en ID selectors

Open de map oefening02-backgrounds-id-selectors. Leg in index.html de link naar de externe stylesheet style.css.
De opgave staat in style.css. Voeg stijlregels toe aan het css-bestand. De HTML mag je niet wijzigen.

Eindresultaat:

---

Oefening 3: Class selectors.

Open de map oefening03-classs-selectors. De opgave staat in de style.css.

Eindresultaat:

---

Oefening 4: Descendant combinator, pseudo-classes en pseudo-elements

Open de map oefening04.... De opgave staat in de style.css.
Het resultaat moet hetzelfde zijn als de vorige oefening maar nu zonder class-attributen toe te voegen. Maak dus geen gebruik van class selectors.

Eindresultaat: zie hierboven.

---

Oefening 5: Combinators: descendant - child - sibling.

Open de map oefening05-combinators-descendant-child-sibling. De opgave staat in de style.css.

Bij deze oefening mag je geen class selectors gebruiken om onderstaand resultaat te krijgen:

---

Oefening 6: Tabelopmaak

Open de map oefening06-tabelopmaak. De opgave staat in de style.css. Maak gebruik van de juiste selectors (geen class selectors gebruiken) om onderstaand resultaat te krijgen.
De gebruikte kleuren staan bovenaan vermeld in style.css.
Let op de uitlijning in de cellen (stijlregel: text-align: value;).

---

Oefening 7: Tabelopmaak.

Open de map oefening07-tabelopmaak.
Maak gebruik van de juiste selectors (geen class selectors gebruiken) om onderstaand resultaat te krijgen voor alle tabellen.

De gebruikte kleuren zijn:

• bovenste rij: tekst: wit en achtegrond: zwart
• tweede rij: lightgreen
• derde rij: lightyellow
• vierde rij: lightgray

De eerste kolom is 150 px breed en de tweede kolom is 300px breed (width: value;).

---

Oefening 8: Lekkerrrrrrrr.

Open de map oefening08-lekkerrrrr. Maak een map css aan en ook een main.css in deze map. Leg de link naar dit bestand in index.html.

Voeg stijlregels toe aan het css-bestand zodat je onderstaande webpagina bekomt. Doe dit zonder gebruik te maken van class-selectors.

Hoe hierbij rekening met het volgende:

• Font stack voor de pagina: Verdana, Geneva, Tahoma, sans-serif;
• Alle headings staan in hoofdletter (niet aanpassen in index.html, wijzigen via CSS).
• Volgende kleuren worden gebruikt:
  • lightblue
  • darkcyan
  • steelblue
  • #f1f1f1;
  • gray
• De caption bij de eerste afbeelding krijgt een kleur (steelblue). De caption bij de tweede afbeelding geef je enkel een beetje meer ondermarge (margin-bottom: 0.5em)
• De lijsttekens van de ongeordende lijst worden niet weergegeven.

Dit is het eindresultaat: