2 HTML: CSS

Webdesign: CSS

Roland Kok

ro.kok@kw1c.nl

1 / 17

Slide 1: Tekstslide

In deze les zitten 17 slides, met interactieve quizzen en tekstslides.

Onderdelen in deze les

Webdesign: CSS

Roland Kok

ro.kok@kw1c.nl

Slide 1 - Tekstslide

Herhaling: Structuur van een webpagina

Slide 2 - Tekstslide

Herhaling: Structuur van een HTML element

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.

(zie ook w3schools.com/css)

Slide 4 - Tekstslide

Wat is CSS?

Slide 5 - Woordweb

HyperText Markup Language

INHOUD & STRUCTUUR

(paragraph, kopje, links, etc)

Cascading Style Sheets

OPMAAK

(kleur, lettertype, plaatsing, etc.)

Slide 6 - Tekstslide

HTML

HyperText Markup Language

INHOUD & STRUCTUUR

(paragraph, kopje, links, etc)

CSS

Cascading Style Sheets

OPMAAK

(kleur, lettertype, plaatsing, etc.)

Slide 7 - Tekstslide

Waarom CSS?

Slide 8 - Woordweb

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 9 - Tekstslide

Hoe werkt CSS?

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

(zie ook w3schools.com/css)

Slide 11 - Tekstslide

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 12 - Tekstslide

Hoe is CSS opgebouwd?

Slide 13 - Tekstslide

(zonder CSS)

style.css

h1 {color: yellow;}

p {color: #e88300;}

Voorbeeld

Slide 14 - Tekstslide

Voorbeeld

body {

background-color: lightblue;

}

h1 {

color: #88cc00;

}

p {

font-family: verdana;

font-size: 18px;

}

Slide 15 - Tekstslide

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 16 - Tekstslide

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 17 - Tekstslide

2 HTML: CSS

Onderdelen in deze les

Slide 1 - Tekstslide

Slide 2 - Tekstslide

Slide 3 - Tekstslide

Slide 4 - Tekstslide

Slide 5 - Woordweb

Slide 6 - Tekstslide

Slide 7 - Tekstslide

Slide 8 - Woordweb

Slide 9 - Tekstslide

Slide 10 - Tekstslide

Slide 11 - Tekstslide

Slide 12 - Tekstslide

Slide 13 - Tekstslide

Slide 14 - Tekstslide

Slide 15 - Tekstslide

Slide 16 - Tekstslide

Slide 17 - Tekstslide

Meer lessen zoals deze

Webdesign - Les 2 (22/23)

Webdesign - Les 3 (23/24): CSS

Webdesign (6: CSS Grid)

HTML & CSS: Opmaak met CSS

WEEK 3 - INFORMATICA

01 - CSS - wat is

CSS

CSS