‹Terug naar zoeken

03 - CSS - css toevoegen

CSS toevoegen aan je pagina
1 / 11
volgende
Slide 1: Tekstslide
ICTMBOStudiejaar 1,2

In deze les zitten 11 slides, met interactieve quizzen en tekstslides.

time-iconLesduur is: 60 min

Onderdelen in deze les

CSS toevoegen aan je pagina

Slide 1 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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

Slide 3 - Woordweb

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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

Slide 8 - Tekstslide

Deze slide heeft geen instructies

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

Slide 9 - Tekstslide

Deze slide heeft geen instructies

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

Slide 10 - Tekstslide

Deze slide heeft geen instructies

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

Slide 11 - Open vraag

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.

Meer lessen zoals deze

03 - CSS - Toevoegen: de integratie met HTML

- Les met 10 slides
ICTMBOStudiejaar 1,2

CSS

- Les met 15 slides
InformaticaMiddelbare schoolhavoLeerjaar 4

HTML & CSS 04 - 4.1 tmt 4.3 - CSS methodes, opmaak

- Les met 26 slides
InformaticaWOStudiejaar 4,5

CSS_ALA_webdesign 1

- Les met 10 slides
Applicatie- en mediaontwikkelaarMBOStudiejaar 1

CSS

- Les met 15 slides
InformaticaMiddelbare schoolhavoLeerjaar 4

Les4 - CSS Selectoren: HTML Elementen Aanspreken

- Les met 22 slides
Applicatie- en mediaontwikkelaarMBOStudiejaar 1

HTML & CSS: Opmaak met CSS

- Les met 21 slides
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

04 - CSS - eigenschappen

- Les met 13 slides
ICTMBOStudiejaar 1-4