‹Revenir à la recherche

03 - CSS - css toevoegen

CSS toevoegen aan je pagina
1 / 11
suivant
Slide 1: Diapositive
ICTMBOStudiejaar 1,2

Cette leçon contient 11 diapositives, avec quiz interactifs et diapositives de texte.

time-iconLa durée de la leçon est: 60 min

Éléments de cette leçon

CSS toevoegen aan je pagina

Slide 1 - Diapositive

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'instructions

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

Slide 3 - Carte mentale

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'instructions

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

Slide 8 - Diapositive

Cet élément n'a pas d'instructions

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

Slide 9 - Diapositive

Cet élément n'a pas d'instructions

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

Slide 10 - Diapositive

Cet élément n'a pas d'instructions

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

Slide 11 - Question ouverte

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.

Plus de leçons comme celle-ci

03 - CSS - Toevoegen: de integratie met HTML

- Leçon avec 10 diapositives
ICTMBOStudiejaar 1,2

CSS

- Leçon avec 15 diapositives
InformaticaMiddelbare schoolhavoLeerjaar 4

CSS

- Leçon avec 15 diapositives
InformaticaMiddelbare schoolhavoLeerjaar 4

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

- Leçon avec 26 diapositives
InformaticaWOStudiejaar 4,5

HTML & CSS: Opmaak met CSS

- Leçon avec 21 diapositives
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

CSS_ALA_webdesign 1

- Leçon avec 10 diapositives
Applicatie- en mediaontwikkelaarMBOStudiejaar 1

HTML & CSS 05 - 4.4 tmt 4.9 - CSS kleuren, hyperlinks, lijsten, tabellen, valideren

- Leçon avec 34 diapositives
InformaticaWOStudiejaar 4,5

Les4 - CSS Selectoren: HTML Elementen Aanspreken

- Leçon avec 22 diapositives
Applicatie- en mediaontwikkelaarMBOStudiejaar 1