CSS - Introductie

1 / 10

Slide 1: Tekstslide

InformaticaMiddelbare schoolhavo, vwoLeerjaar 4,5

In deze les zitten 10 slides, met tekstslides.

Lesduur is: 50 min

Onderdelen in deze les

Slide 1 - Tekstslide

Leerdoel

Aan het eind van deze les weet je wanneer je CSS kan toepassen in een website en heb je geoefend met het aanmaken en toepassen van CSS op een HTML5 website.

Slide 2 - 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 3 - Tekstslide

Waarom CSS?

Alle opmaak van de website in één bestand
Een kleine verandering wordt gelijk doorgevoerd op de hele website (dus als je meerdere pagina's hebt)
Maakt de onderliggende HTML-code een stuk overzichtelijker

Slide 4 - 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 5 - 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 6 - Tekstslide

Hoe is CSS opgebouwd?

Slide 7 - Tekstslide

Zonder CSS

Met CSS:

h1 {color: yellow;}

p {color: #e88300;}

Slide 8 - Tekstslide

Nog een voorbeeld

body { background-color: lightblue; }

h1 { color: #88cc00; text-aling: center; }

p { font-family: verdana; font-size: 18px; }

Slide 9 - Tekstslide

Meer informatie over CSS?

https://www.w3schools.com/css/css3_intro.asp

Slide 10 - Tekstslide

CSS - Introductie

Onderdelen in deze les

Slide 1 - Tekstslide

Slide 2 - Tekstslide

Slide 3 - Tekstslide

Slide 4 - Tekstslide

Slide 5 - Tekstslide

Slide 6 - Tekstslide

Slide 7 - Tekstslide

Slide 8 - Tekstslide

Slide 9 - Tekstslide

Slide 10 - Tekstslide

Meer lessen zoals deze

2 HTML: CSS

03 - CSS Toevoegen: de integratie met HTML

03 - CSS - css toevoegen

week 2 HTML CSS

Webdesign - Les 2 (22/23)

week 3 netwerken webserver DNS

Webdesign - Les 3 (23/24): CSS

week 2 HTML CSS