Stichting FutureNL
Wij brengen digitale vaardigheden écht in de klas
Visit the website
menu
Start
Lessen PO
Lessen VO
Lessen Pabo
Ter inspiratie
Search
About
Curricula
CSS - Introductie - VO

CSS - Introductie - VO

1 / 8
next
Slide 1: Slide
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4,5

This lesson contains 8 slides, with text slides.

time-iconLesson duration is: 15 min

Instructions

Competenties
- De leerling kan een computerprogramma schrijven in code. 

Items in this lesson

Slide 1 - Slide

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

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

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

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

Hoe is CSS opgebouwd?

Slide 6 - Slide

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

Slide 7 - Slide

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

Slide 8 - Slide