03 - CSS - css toevoegen

CSS toevoegen aan je pagina

1 / 11

Slide 1: Slide

ICTMBOStudiejaar 1,2

This lesson contains 11 slides, with interactive quizzes and text slides.

Lesson duration is: 60 min

Items in this lesson

CSS toevoegen aan je pagina

Slide 1 - Slide

This item has no instructions

Leerdoel van de les

Aan het einde van de les kun je CSS op 3 manieren toevoegen aan je pagina:

external css
internal css
inline css.

Slide 2 - Slide

This item has no instructions

Wat weet je al over het toevoegen van CSS aan je pagina?

Slide 3 - Mind map

This item has no instructions

External CSS

Met external CSS kun je een apart CSS-bestand maken en deze koppelen aan je HTML-pagina.

    /* Externe CSS-stijlregels */
   body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
        margin: 0;
        padding: 0;
   }

    <html>
        <head>
            <title>Extern CSS-voorbeeld</title>
            <link rel="stylesheet" type="text/css" href="style.css">
        </head>
        <body>
            <h1>Dit is een extern CSS-voorbeeld</h1>
        </body>
   </html>

Slide 4 - Slide

This item has no instructions

Internal CSS

Met internal CSS kun je CSS-stijlen direct in het head-gedeelte van je HTML-document plaatsen.

    <html>
        <head>
            <title>Interne CSS-voorbeeld</title>
            <style>
                /* Interne CSS-stijlregels */
                body {
                    font-family: Arial, sans-serif;
                    background-color: #f0f0f0;
                    margin: 0;
                    padding: 0;
                }
            </style>
        </head>
        <body>
            <h1>Dit is een interne CSS-voorbeeld</h1>
        </body>
   </html>

Slide 5 - Slide

This item has no instructions

Inline CSS

Met inline CSS kun je CSS-stijlen direct in een HTML-element plaatsen met behulp van het 'style' attribuut.

<p style="color: blue; font-size: 16px;">Tekst</p>

Slide 6 - Slide

This item has no instructions

Voor- en nadelen

External CSS maakt hergebruik van stijlen eenvoudig.

Internal CSS is handig voor kleine aanpassingen

Inline CSS is handig voor specifieke elementen.

Slide 7 - Slide

This item has no instructions

Praktijkvoorbeelden

Laat verschillende codevoorbeelden zien waarin external, internal en inline CSS worden toegepast.

Slide 8 - Slide

This item has no instructions

Opdracht

Geef de leerlingen een opdracht waarin ze CSS op de verschillende manieren moeten toepassen op een HTML-pagina.

Slide 9 - Slide

This item has no instructions

Samenvatting

Herhaal de 3 manieren om CSS toe te voegen aan een pagina en benadruk de belangrijkste punten.

Slide 10 - Slide

This item has no instructions

Stel 1 vraag over iets dat je nog niet zo goed hebt begrepen.

Slide 11 - Open question

De leerlingen geven hier (in vraagvorm) aan met welk onderdeel van de stof ze nog moeite. Voor de docent biedt dit niet alleen inzicht in de mate waarin de stof de leerlingen begrijpen/beheersen, maar ook een goed startpunt voor een volgende les.