Yuverta
‹Terug naar zoeken

CSS - Introductie - VO

1 / 8
volgende
Slide 1: Tekstslide
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4,5

In deze les zitten 8 slides, met tekstslides.

time-iconLesduur is: 15 min

Instructies

Competenties
- De leerling kan een computerprogramma schrijven in code. 

Onderdelen in deze les

Slide 1 - Tekstslide

Wat is CSS?
  • Cascading Style Sheet (Overkoepelend StijlDocument)

  • Je geeft er de opmaak van een HMTL-pagina in op

  • Vanaf nu geen opmaak meer in een HTML-pagina!

Slide 2 - Tekstslide

Waarom CSS?
  • Alle opmaak van de website in één bestand

  • Een kleine verandering wordt geblijk doorgevoerd  op de hele website (dus als je meerdere pagina's hebt)

  • Maakt de onderliggende code een stuk overzichtelijker

Slide 3 - Tekstslide

Hoe werkt CSS?
  • Een stylesheet maak je in een eigen bestand

  • Je slaat het bestand op met de naam style.css

  • Je verwijst in al je HTML-pagina's naar de stylesheet
    <link rel="stylesheet" type="text/css" href="style.css">

Slide 4 - Tekstslide

Hoe CSS plaatsen in HTML?
<!DOCTYPE html>
 
<html lang="nl">
    <head>
        <title>Werken met CSS</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>

    <body>      
      <h1>Dit is de titel van pagina 1</h1>
      <p>Dit is de eerste alinea van pagina 1</p>
    </body>
</html>

Slide 5 - Tekstslide

Hoe is CSS opgebouwd?

Slide 6 - Tekstslide

Zonder CSS
Met CSS:
h1 {color: yellow;}
p {color: #e88300;}

Slide 7 - Tekstslide

Meer informatie over CSS?
https://www.w3schools.com/css/css3_intro.asp

Slide 8 - Tekstslide