Webdesign (3: CSS)

Webdesign: CSS

Antje Roestenburg

a.roestenburg@minkema.nl

1 / 16

Slide 1: Slide

InformaticaMiddelbare schoolhavo, vwoLeerjaar 4,5

This lesson contains 16 slides, with interactive quizzes and text slides.

Lesson duration is: 30 min

Items in this lesson

Webdesign: CSS

Antje Roestenburg

a.roestenburg@minkema.nl

Slide 1 - Slide

Herhaling: Structuur van een webpagina

Slide 2 - Slide

Herhaling: Structuur van een HTML element

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.

(zie ook w3schools.com/css)

Slide 4 - Slide

Wat is CSS?

Slide 5 - Mind map

HTML

HyperText Markup Language

INHOUD & STRUCTUUR

(paragraph, kopje, links, etc)

CSS

Cascading Style Sheets

OPMAAK

(kleur, lettertype, plaatsing, etc.)

Slide 6 - Slide

Waarom CSS?

Slide 7 - Mind map

Waarom CSS?

Alle opmaak van de website in
één bestand.
Een kleine verandering wordt
gelijk doorgevoerd op alle
pagina's van je website.
Maakt de HTML-code een stuk
overzichtelijker.

Slide 8 - Slide

Hoe werkt CSS?

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

(zie ook w3schools.com/css)

Slide 10 - Slide

Hoe werkt CSS?

<html>

<head>

<title>Dit is de titel van pagina 1</title>

</head>

<body>

<p>Dit is de eerste alinea van pagina 1</p>

</body>

</html>

Slide 11 - Slide

Hoe is CSS opgebouwd?

Slide 12 - Slide

(zonder CSS)

style.css

h1 {color: yellow;}

p {color: #e88300;}

Voorbeeld

Slide 13 - Slide

Voorbeeld

body {

background-color: lightblue;

}

h1 {

color: #88cc00;

}

p {

font-family: verdana;

font-size: 18px;

}

Slide 14 - Slide

Opmaak definiëren met selectors

Tag selector (HTML tag)

h2 {

color: blue;

font-style: italic;

}

ID selector (een per pagina)

#footer {

color: red;

}

Class selector (meerdere)

.article {

background-color: #cccccc;

}

Slide 15 - Slide

Aan de slag:

Kijk t/m video 4
Maak t/m opdracht 12 (stel evtl vragen in het Q&A document)
Verzamel ideen (teksten en plaatjes) voor je Website

Volgende les:

Tabellen

Slide 16 - Slide

Webdesign (3: CSS)

Items in this lesson

Slide 1 - Slide

Slide 2 - Slide

Slide 3 - Slide

Slide 4 - Slide

Slide 5 - Mind map

Slide 6 - Slide

Slide 7 - Mind map

Slide 8 - Slide

Slide 9 - Slide

Slide 10 - Slide

Slide 11 - Slide

Slide 12 - Slide

Slide 13 - Slide

Slide 14 - Slide

Slide 15 - Slide

Slide 16 - Slide

More lessons like this

CSS - Introductie

Webdesign (6: CSS Grid)

2. Lists en CSS Basics

3. CSS Box Model

4. Divisions en Classes

20MVABCD | HTML & CSS quiz

HTML & CSS quiz --> Les 2

HWUD04-sj2122-03-HTML-document