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",
    /* ... */
  }

 

[RogierBe]

Ik vind de form er erg lelijk uitzien, omdat ze niet onder elkaar staan. Daarom heb ik geprobeerd om de labels links te alignen en de inputvelden te centreren. Echter is dat erg lastig omdat ze naast elkaar op een regel staan. Ook heb ik geprobeerd alle line breaks van de form in CSS te doen in plaats van in HTML. Dit heb ik geprobeerd aan de hand van google/stackoverflow, omdat ik dit niet kon vinden in w3schools. De laatste poging om deze dingen werkend te krijgen staan als comment in de CSS file. Verder is de list op de about pagina een beetje lelijk, omdat het gecentreerd is en de bullets helemaal links staan. Hier stond niks over in de opdracht, dus heb ik niks veranderd.