★ Aan de slag 32

  1. Open in Notepad++ het bestand template.html Voeg aan de body van het HTML-document de code uit de onderstaande tekst toe.

    <section>
    <article>
    <h2 class= "rand">
            Dit is een koptekst
         </h2>
         <p class= "rand">
            Dit is een alinea
         </p>
      </article>
      <article>
         <h2 class= "rand">
            Dit is een koptekst
         </h2>
         <p class= "rand">
            Dit is een alinea
         </p>
      </article>
    </section>


    Sla het bestand op in de map html onder de naam boxmodel.html
  2. Open in Notepad++ het bestand opmaak.css
    Voeg de code uit de onderstaande tekst toe voor de opmaak van het element p met het attribuut class= "rand" en voor de opmaak van het element h2 met het attribuut class= "rand" .

    p.rand
    (
      background: #dddddd;
      margin: 15px 15px 15px 15px;
      padding: 15px 15px 15px 15px;
      border: 1px solid;
      border-radius: 7px;
    }

    h2.rand
    (
      background: #dddddd;
      margin: 15px 15px 15px 15px;
      padding: 15px 15px 15px 15px;
      border: 1px solid;
      border-radius: 7px;
    }


    Sla daarna het bestand op onder dezelfde naam
    Open het bestand boxmodel.html in een browser.
    Wat is de functie van de regel border-radius: 7px;?
  3. Open in Chrome het bestand boxmodel.html
    Activeer de ontwikkelomgeving en verander de waarden van de margin van het eerste element p in de code van margin: 15px 15px 15px 15px; in margin: 4px 6px 8px 10px;.
    Bekijk wat er verandert in het boxmodel van de ontwikkelomgeving.
    De veranderingen die je aanbrengt in de ontwikkelomgeving worden niet opgeslagen.
    Na het sluiten van de browser heeft het element p met het attribuut class= "rand" voor de margin nog steeds de waarden margin:15px 15px 15px 15px;.
    Voor meer uitleg bekijk de afbeelding hieronder.

  4. Open in Notepad++ het bestand opmaak.css Verander voor het element p met het attribuut class= "rand" de waarde van de padding van padding:15px 15px 15px 15px; in padding: 15px;. Sla het bestand op onder dezelfde naam.
    Open nu in Chrome het bestand boxmodel.html en bekijk de instellingen van het element p in de ontwikkelomgeving. Verander in het CSS-gedeelte de regel padding: 15px 15px 15px 15px; in padding: 15px;.
    Welke conclusie kun je nu trekken?