CSS - Introductie

1 / 10

Slide 1: Slide

InformaticaMiddelbare schoolhavo, vwoLeerjaar 4,5

This lesson contains 10 slides, with text slides.

Lesson duration is: 50 min

Items in this lesson

Slide 1 - Slide

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

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

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

Hoe is CSS opgebouwd?

Slide 7 - Slide

Zonder CSS

Met CSS:

h1 {color: yellow;}

p {color: #e88300;}

Slide 8 - Slide

Nog een voorbeeld

body { background-color: lightblue; }

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

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

Slide 9 - Slide

Meer informatie over CSS?

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

Slide 10 - Slide

CSS - Introductie

Items in this lesson

Slide 1 - Slide

Slide 2 - Slide

Slide 3 - Slide

Slide 4 - Slide

Slide 5 - Slide

Slide 6 - Slide

Slide 7 - Slide

Slide 8 - Slide

Slide 9 - Slide

Slide 10 - Slide

More lessons like this

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