CSS - Introductie - VO

1 / 8

Slide 1: Tekstslide

InformaticaMiddelbare schoolhavo, vwoLeerjaar 4,5

In deze les zitten 8 slides, met tekstslides.

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

<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