02. Opdracht 1.2: Eenvoudige styling met Cascade Stylesheet

[JeroenHeemskerk]

• Lees de introductie over een Externe CSS op https://www.w3schools.com/css en pas dit toe in index.html, about.html & contact.html.
• Lees als je nog niet bekend bent met CSS op W3Schools de secties [CSS Introduction] t/m [CSS Combinators] en de sectie [CSS Dropdowns].
• Deel je HTML op in divisies en elementen en met een class-attribuut en style je tags per divisie/element **
• Als je iets werktend hebt commit dat dan naar je lokale repository (o.v.v. het issuenummer), zodat je altijd naar dat punt terug kunt gaan.
• Zorg er met CSS voor dat:
  
  • De pagina 800 pixels breed is en gecentreerd wordt op je beeldscherm, binnen de 800 pixels blijft de hoofdtekst links uitgelijnd.
  • De header tekst minimaal 48 pixels hoog is, en gecentreerd is.
  • De lijst die het menu voorstelt geen bullets bevat, en de items omkaderd zijn en op 1 regel achter elkaar staan.
  • De links in het menu geen underline hebben.
  • De links in het menu een witte tekst op een blauwe achtergrond hebben.
  • De pagina-tekst een tekstgrootte van 12 pixels hebben en donkergrijs van kleur op een witte achtergrond.
  • De footer een zwarte achtergrond heeft met witte letters, tekstgrootte van 10 pixels en rechts is uitgelijnd.
  • Alle inputvelden 400 pixels breed zijn, en de labels ervoor staan.
• Commit de laatste wijzigingen naar je lokale repository (o.v.v. het issue nummer).
• Push alle commits naar GitHub

 

** Voorbeeld voor het werken met een class attribuut:

HTML-file:
  <!-- ... -->
  <ul class="menu">
     <li><a href="index.htm"/>Home</a></li>
     <!-- ... -->
  </ul>

CSS-file:
  /* ... */
  ul.menu li > a {
    color : "white",
    /* ... */
  }