In het onderdeel over HTML5 hebben we uitgelegd wat het verschil is tussen de attributen id en class. Voor deze opdracht maken we gebruik van het bestand id_class.html Dit bestand tref je aan in het zip-bestand dat je al eerder hebt moeten downloaden en uitpakken in je home-directory in de map html.
In de tekst hieronder staat broncode van dit bestand.
<h3 class="naam">
Koptekst eerste alinea
</h3>
<p>
Tekst eerste alinea
</p>
<h3>
Koptekst tweede alinea
</h3>
<p class="naam">
Tekst tweede alinea
</p>
<h3>
Koptekst derde alinea
</h3>
<p id="naam">
Tekst derde alinea
</p>
Open in een browser het bestand id_class.html en bekijk het resultaat. We gaan de lay-out van deze webpagina nu regelen in de externe stylesheet opmaak.css
Open in Notepad++ het bestand opmaak.css dat staat in de map css. Regel in het CSS-bestand dat de koptekst h3 het font Arial en de kleur blue krijgt. Een alinea krijgt als font Courier en de kleur van het font wordt red. Sla het bestand op onder dezelfde naam. Dus opmaak.css. Open daarna het bestand id_class.html en bekijk het resultaat. Of ververs de webpagina als het bestand nog geopend is. Hebben de kopteksten <h3 class="naam"> en <h3> een andere opmaak gekregen?